close by click on open dropdown

[servusrene]

trafficstars

Is your feature request related to a problem? Please describe. In order for users to be able to use the dropdown even better (especially on the mobile view), a feature is needed that closes the dropdown when clicked.

Describe alternatives you've considered https://react-select.com/home

[mtriff]

You can implement this using hideDropdown.

[servusrene]

i have already tried this. unfortunately it did not work, because it is not possible to check from the outside if the dropdown is open or not.

[mtriff]

Why is that necessary? You can run hideDropdown whether or not the dropdown is open or not.

Regardless, you can check whether it's open or not by accessing choicesInstance.dropdown.isActive.

[servusrene]

In order to close the dropdown menu, a listener must be made on the click event of the input. Then this is triggered not only when closing but also when opening. Thus, a check must be made so that it can be decided what happens.

In my first attempt, I have checked for css classes, then the dropdown menu would be opened and instantly closed again (by the double click event). Thus, with their property will also not be possible.

[lieto-dk]

Hi,

I use this setup as workaround - it closes on change and makes it possible to use choices well with a mobile device.

<script>
    const country_select = document.querySelector('.country_select');
    const country_choices = new Choices(country_select, {
        itemSelectText: "+",
        removeItemButton: true,
        position: "bottom",
        resetScrollPosition:false,
        noResultsText: '{{ __('front.searchform_select2_no_results')}}',
        noChoicesText: '{{ __('front.searchform_select2_no_choices')}}',
    });
    country_select.addEventListener(
        'change',
        function(event) {
            country_choices.hideDropdown();
        },
        false,
    );
</script>

[Sysix]

I facing the same problem. Here my code:

        const event = () => {
            if (api.dropdown.isActive) {
                api.hideDropdown();
            }
        }

        api.*.element.addEventListener('pointerdown', event);

The problem is, that Choices-Js will close the dropdown and then reopen it. Tried to wait with setTimeout(.., 0) and requestAnimationFrame(...). Sadly the change didn't had a effect.

On Touch Devices it is frustrating to not know how to close the select. @lieto-dk solution is not ok for me because i'm handling a multi select. Everytime reopening it is bad.