[Multiple Selection Dropdown Widget (Reactive And Mobile)] Multi Select Dropdown not closing when clicking on other Multi select dropdown
Application Type
Reactive

Hello Team,

Thanks for your continuous support.

I have one more query, Hope you will be able to help in this.

In my web page there are several Multi Select drop downs and Its able to close after clicking outside on the page but the  issue is when we directly click from one multi select to another multi select component , Its not closing the previous multi select.

How we are closing the Multi Select while clicking outside of the page likewise I want to implement same behaviour on above scenario.(When we are moving from one multi select to another it should close previous and open next one).

Hope I am enough clear to the team.I will be waiting for your responce

MultiSelect.PNG

Dear Vishal

With the default setup, each dropdown acts independently of the other. You can do bit of JavaScript to close any open dropdowns when opening a new one.


First, we’ll listen for a special event called toggle on the .my-nav (Replace with the field class) navigation. This event fires on a <details> element when it’s opened or closed.

This event doesn’t bubble, so you’ll need to set useCapture to true.

var nav = document.querySelector('.my-nav');
nav.addEventListener('toggle', function (event) {
    // Do stuff...
}, true);

If the clicked element isn’t open, we’ll do nothing.

Otherwise, we’ll get all of the open dropdowns in our nav element, and close them by removing the [open] attribute. We’ll check that the item isn’t the one we just opened first, though.

var nav = document.querySelector('.my-nav');
nav.addEventListener('toggle', function (event) {

    // Only run if the dropdown is open
    if (!event.target.open) return;

    // Get all other open dropdowns and close them
    var dropdowns = nav.querySelectorAll('.dropdown[open]');
    Array.prototype.forEach.call(dropdowns, function (dropdown) {
        if (dropdown === event.target) return;
        dropdown.removeAttribute('open');
    });

}, true);

And that’s it!

 

Hi Manish,

Thank you for a very good suggestion which would work well in other situations, however this widget is not implemented using the architecture you describe.

Best Regards,
Chris.

Ahh Chris 

I got it. I haven't use the Plugin but JS is a best friend always to solve such situation. So, thought might work. :)


Many Thanks for your kind help with the same. 

Thank you very much Manish, For your suggestion

Hi Vishal Vilas Takale,

Thank you for the feedback!

I know exactly what you mean!

When deciding on the automatic closing behaviour of the MultiSelect_ReactAndMob dropdown, I wanted it to be possible to have two dropdowns open simultaneously.

However, given the behaviour of the regular HTML <select> is to close other dropdowns when opening a new one, I completely understand why you would want the MultiSelect_ReactAndMob dropdown to behave the same way.

Give me a few days to decide how best to implement this (without losing the ability to have two dropdowns open simultaneously), and I'll get back to you.

Best Regards,

Chris. :)

Hi Vishal,

Thanks for your feedback!

I've just uploaded a new version to the forge which should solve your problem.


v 1.3.1
New Features

  • Added option: choose whether menu
    - closes when a new menu is opened (standard behaviour of regular HTML <select>)
    OR
    - stays open when another MultiSelect_ReactAndMob menu is opened (default)


You will need to set "Menu_StaysOpenWhenUserClicksOnAnotherMultiSelect = False" (it's true by default)


Please let me know if there is anything else I can do to help! :)
(or if this doesn't solve your problem)


I welcome suggestions for improvement!
If you find the widget useful, please consider reviewing or rating it.

Thanks and have a good day!

Chris. :)

Really glad to hear that,

Thank you very much team for your quick response.

This component helps us a lot to achieve certain things.

Really thanks for the support.

You are welcome!
I'm glad to help! :)


(also, could you do me a favour? please mark the question as answered/solved/etc. Thanks!)

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.