FilterInterface - filter property - type error

[AEDevSolutions]

Hi! Please help! I catch error when try use Filters.

[juzser]

@AEDevSolutions
I've checked and see in the preview here, there is not warning log.
The doc is also have no warning.

Could you provide your code, then I can take a look?

[AEDevSolutions]

@AEDevSolutions I've checked and see in the preview here, there is not warning log. The doc is also have no warning.

Could you provide your code, then I can take a look?

Hi! Thank you for help!
I record video: https://drive.google.com/file/d/1yQm3FXMV6X6uqyi4SDHJT_ipilH5YGg0/view?usp=sharing

<template>
<Filters
        :query-value="queryValue"
        :filters="filters"
        :appliedFilters="appliedFilters"
        :hideClearButton="true"
        :pinned="false"
        @query-change="handleFiltersQueryChange"
        @query-clear="handleQueryValueRemove"
        @clear-all="handleFiltersClearAll"
    >
    </Filters>
    <BlockStack gap="300" style="flex-direction: row; margin-top: 10px; margin-bottom: 10px; padding: 0 10px; flex-wrap: wrap">
        <Tag @remove="handleTagRemove(option)"
             v-for="option in ['Local campaigns',  'Charities list 3', 'Charities list', 'Charities list 2', 'Charities list 3']"
             :key="option">
            {{ option }}
        </Tag>
    </BlockStack>

    <Divider/>

    <ResourceList
        :showHeader="false"
        :resourceName="resourceName"
        :items="items"
        selectable
    >
        <template v-for="{id, url, name, location} in items" :key="id">
            <ResourceItem
                verticalAlignment="center"
                :id="id"
                :url="url"
                :accessibilityLabel="`View details for ${name}`"
            >
                <template #media>
                    <Thumbnail
                        size="small"
                        source='https://burst.shopifycdn.com/photos/[email protected]'
                        alt="Black choker necklace"
                    />
                </template>
                <Text variant="bodyMd" fontWeight="bold" as="h2">
                    {{ name }}
                </Text>
            </ResourceItem>
        </template>
    </ResourceList>



</template>

<script setup>
import {ref, h, resolveComponent, computed} from 'vue';

const taggedWith = ref('');
const accountStatus = ref();
const moneySpent = ref();
const queryValue = ref('');

const appliedFilters = computed(() => {
    const tmpFilters = [];

    if (!isEmpty(accountStatus.value)) {
        const name = 'accountStatus';
        tmpFilters.push({
            name,
            label: disambiguateLabel(name, accountStatus.value),
            onRemove: handleAccountStatusRemove,
        });
    }

    if (!isEmpty(moneySpent.value)) {
        const name = 'moneySpent';
        tmpFilters.push({
            name,
            label: disambiguateLabel(name, moneySpent.value),
            onRemove: handleMoneySpentRemove,
        });
    }

    if (!isEmpty(taggedWith.value)) {
        const name = 'taggedWith';
        tmpFilters.push({
            name,
            label: disambiguateLabel(name, taggedWith.value),
            onRemove: handleTaggedWithRemove,
        });
    }

    return tmpFilters;
});

const handleTagRemove = function (option) {

}

const handleTaggedWithRemove = () => {
    taggedWith.value = '';
};

const handleQueryValueRemove = () => {
    queryValue.value = '';
};

const handleAccountStatusRemove = () => {
    accountStatus.value = [];
};

const handleMoneySpentRemove = () => {
    moneySpent.value = undefined;
};

const handleAccountStatusChange = (value) => {
    accountStatus.value = value;
};

const handleFiltersQueryChange = (value) => {
    queryValue.value = value;
}

const handleMoneySpentChange = (value) => {
    moneySpent.value = value;
};

const handleTaggedWithChange = (_e, value) => {
    taggedWith.value = value;
};

const handleFiltersClearAll = () => {
    handleAccountStatusRemove();
    handleMoneySpentRemove();
    handleTaggedWithRemove();
    handleQueryValueRemove();
};

const filters = [
    {
        name: 'accountStatus',
        label: 'Account status',
        filter: () => h(resolveComponent('ChoiceList'), {
            title: 'Account status',
            titleHidden: false,
            choices: [
                {label: 'Enabled', value: 'enabled'},
                {label: 'Not invited', value: 'not invited'},
                {label: 'Invited', value: 'invited'},
                {label: 'Declined', value: 'declined'},
            ],
            modelValue: accountStatus.value,
            allowMultiple: true,
            onChange: handleAccountStatusChange,
        }),
        shortcut: true,
    },
    {
        name: 'taggedWith',
        label: 'Tagged with',
        filter: () => h(resolveComponent('TextField'), {
            label: 'Tagged with',
            modelValue: taggedWith.value,
            autoComplete: "off",
            labelHidden: true,
            onInput: handleTaggedWithChange,
        }),
        shortcut: true,
    },
    {
        name: 'moneySpent',
        label: 'Money spent',
        filter: () => h(resolveComponent('RangeSlider'), {
            label: 'Money spent is between',
            labelHidden: true,
            modelValue: moneySpent.value || [0, 500],
            prefix: "$",
            output: true,
            min: 0,
            max: 2000,
            step: 1,
            onChange: handleMoneySpentChange,
        }),
    },
];

const resourceName = {
    singular: 'customer',
    plural: 'customers',
};

const items = [
    {
        id: '108',
        url: '#',
        name: 'Category 1',
        location: 'Decatur, USA',
    },
    {
        id: '208',
        url: '#',
        name: 'Category 2',
        location: 'Los Angeles, USA',
    },
];

function disambiguateLabel(name, value) {
    switch (name) {
        case 'moneySpent':
            return `Money spent is between $${value[0]} and $${value[1]}`;
        case 'taggedWith':
            return `Tagged with ${value}`;
        case 'accountStatus':
            return value?.map((val) => `Customer ${val}`).join(', ');
        default:
            return value;
    }
}

function isEmpty(value) {
    if (Array.isArray(value)) {
        return value.length === 0;
    } else {
        return value === '' || value == null;
    }
}
</script>


<style scoped lang="scss">

</style>

[juzser]

Ok I see, it's inside the modal. We're looking into it.

[juzser]

@AEDevSolutions Can you check to see if it's still occur on v2.1.9?

[AEDevSolutions]

@AEDevSolutions Can you check to see if it's still occur on v2.1.9?

i try) need wait?

[AEDevSolutions]

@juzser I checked but the problem persists with the same behavior.

[HQCuong]

hi @AEDevSolutions, this issue fixed in version 2.1.10

[AEDevSolutions]

hi @AEDevSolutions, this issue fixed in version 2.1.10

Thank you! The error has indeed gone away, but the problem with the fact that after selecting a filter, the window with the filter list does not close when clicked outside this window has not disappeared.

[blacklen]

Hi @AEDevSolutions, I got your problem.
But after trying to use Polaris React to recreate your issue, the original one got the same issue as ours.
Seems like if we try to use Filter on Modal, we need to close the FillterPill by clicking on itself.

[AEDevSolutions]

Hi @AEDevSolutions, I got your problem. But after trying to use Polaris React to recreate your issue, the original one got the same issue as ours. Seems like if we try to use Filter on Modal, we need to close the FillterPill by clicking on itself.

Bad news. Thanks for the clarification.