Reset connected dropdown filter through velo breaks functionality

Discussion:
Reset connected dropdown filter through velo code breaks filter functionality

What are you trying to achieve:
I have page with dataset and records are shown in a repeater. To filter the content I have a dropdown which is using “Connected to CMS”. This work great when selecting any item from the dropdown, and it automatically filter the content in the repeater accordingly. I have another button “Reset” which is setting the wixData.filter() and the dropdown.value to “undefined”. The repeater will reset and display all records (unfiltered), but from that point the dropdown functionality will not work unless the page is refreshed. What is the right way to reset the filter and keep the automatic filter (without override the onChange of the dropdown)?

Additional information:
[Is there any additional information you want to add that might help others answer your question.]

Do you use —> CODE, or only predefined wix-stuff like datasets and its connections?

The page is using dataset to fetch and display the data. The dropdown is connected to the dataset and is using the “Connect to CMS” to filter data. It is working great as it is showing the available values one can select from in the dropdown, and upon selection from the drop down, it is filtering based on the selected value.
The CX is broken when the “Reset / clear all” is clicked and this is when the dropdown selection is set to undefined, and the dataset filter is set to empty filter, and it is refreshed to show all values. The reset part is indeed showing unfiltered list (all values), but from that point onward, new selection from the dropdown will not filter the dataset accordingly.

(No filter through code on this page, only reset through code).

…only reset through code.

Please show related code…

export function buttonClearAllFilter_click(event) {
    try {
        let filterFields = ['#filterPeriod', '#filterBrokerage', '#filterAgent', '#filterHomeowner', '#filterProduct'];
        let filterDropdownFields = ['#dropdownPeriod', '#dropdownBrokerage', '#dropdownAgent', '#dropdownHomeower', '#dropdownProduct'];

        // Add 'm' if mobile
        if (event.target.id[0] == 'm') {
            filterFields = filterFields.map(id => 'm' + id);
            filterDropdownFields = filterDropdownFields.map(id => 'm' + id);
        }
        for (let i = 0; i < filterFields.length; i++) {
            $w(filterDropdownFields[i]).value = undefined;
            $w(filterFields[i]).text = $w(filterDropdownFields[i]).value;
        }
        (event.target.id[0] != 'm') ? $w('#filterMenuBox').collapse(): $w('#mfilterMenuBox').collapse();

        // Reset dataset filter and status filter
        $w("#searchField").value = '';
        $w("#mSearchField").value = '';
        $w("#dropdownStatusFilter").value = undefined; // BUG: can no longer filter after setting value through code
        $w("#projectsDS").setFilter(wixData.filter());
        $w("#projectsDS").refresh();
    } catch (error) {
        console.log('Error clearing filter', error);
    }
}

Regarding your coding skills → i ask myselft → shouldn’t you be able to generate all your filtering-engine just by code, instead of using DATASET-CONNECTIONS ???

You can use your dataset, but no usage of connetions. Instead you would code all function by your own ?

What would be your benefits and advantages?
-more flexibility
-more opertunities of how to generate your filter
-more control
-less confusing mix-ups between CODE and PREDEFINED STUFF (which in many cases do cause exact such situations, which you have right now.)

If i would be YOU → i would kick out all the connections to your dataset you have used already and do every step of your FILTERING-ENGINE on your own, designing your ENGINE exactly like you want.

Thank you Dima.

While my coding skills can stand to the task, I have done on other pages, and seems that when it comes to Read/Write datasets (it is a CRUD page), the dataset has pan better performance. I am suspecting that we do not really have control on the wixData API, Wix might have better optimizations at the back end.
If you have better experience with CRUD form that has many input fields, checkboxes, dropdown, and repeaters, and can share sample code to accomplish CRUD with higher or as good of a performance as the Dataset, appreciate if you can share.