Dropdown with javascript and css won't close properly when clicking outside of it
Application Type
Reactive
Service Studio Version
11.10.22 (Build 41777)

On my webpage i have a list with customer info, i want to filter this list via dropdown's this part all works fine. But when i have multiple dropdown's and i have one opened and i want to open another one the first dropdown stays open, this dropdown needs to close when i click anywhere else. Now i understand why this happens i just don't know how to this another way. In the screenshot below you can see they are both open but one needs to close as soon as you open another.

Jquery is not an option for me.

I'm using the javascript from this w3schools howto page:


https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

Just a quick observation: it seems as if you use different dropdown widgets.

This could mean the css classes work different for either dropdown. Did you check inspector in the browser?


I created my own dropdown's. They both have the same css classes. The problem is:

(!event.target.matches('.dropbtn'))

.dropbtn is the topdiv for both of them so it wont close. i'm looking for a different approach.

Hello Daan,

I have a solution, that you can see it working here:

https://personal-xchr.outsystemscloud.com/crowdfund/Homepage?_ts=637558056316622667

I create a block that use a javascript file, that you can inspect to see it.

Hope it helps.

Best Regards,

Nuno R


Hello Daan,

I change the link with this one:

https://personal-xchr.outsystemscloud.com/DropdownTests/Homepage?_ts=637562361747642381

Best Regards,

Nuno R

Hi, Sorry for the late reply. The link you sent is not working, can you please update it to the correct link?

Thanks a lot!

Hello Daan,

Sorry for the late replay also. I change the link and forgot to told you, the new one:

https://personal-xchr.outsystemscloud.com/Tests/Dropdown

Hope it helps you.

Best Regards,

Nuno R

Hi, would you be so kind to share the oml with me ?


Thank you!

Hello Daan,

See in attach the OML with the solution.

Hope it helps you.

Best Regards,

Nuno R

Dropdown.oml

Hi,

This looks very good. The only problem left is when I click on "show items" when the dropdown is already open it is supposed to close but that is not working yet. I hope this is easy to fix. Do you know the best way to do this?

Hi Daan,

Try the one that I send in attach.

Hope it helps you.

Best Regards,

Nuno R

Dropdownv1.oml

Dear Nuno

Great Work! @Daan v I hope this has helped and you are able to use same in your Project.


Please feel free to ask if you have any doubts. 

Hello Daan

Can you share the URL for your personal environment with Anonymous access or share the OML? I will correct it for you.

Hi i did what you asked for:

Hope it works and thanks in advance

dropdownwithJS.oml

Hii Daan V


Thanks for sharing the OML. I have installed and run the application here: https://personal-9qwkrkgl.outsystemscloud.com/dropdownwithJS/dropdowns?_ts=637566045408365564


So, as I can see when we open 1st Dropdown and click anywhere in window it get closed except from Dropdown 2. 


Do you want the Dropdown 1 gets closed if someone clicks on Dropdown 2? 


Please confirm 

Hi Manish Gupta,


Yes, that is exactly what i need and the other way around.

You just have need to change the Class of 2nd Dropdown. Please look into the code you have used to close the Dropdown - 

// Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }

In the If Condition you are saying to close the dropdown if the target class of not .dropbtn

And you have given the same class to 2nd dropdown which fails the if condition and dropdown remains open. 


Please change the class name for 2nd dropdown and add same properties for that class. You can use .dropbtn2


I hope it is clear and solved your problem.

Hi, 

Thanks a lot for giving this a try, but i'm afraid this will not solve my problem since i won't be able to reuse multiple of the same dropdown in one page.

Do you know any other fix?

Yes, for that we will need to use the different approach of closing the dropdown. Let me prepare the app for you. 

Please give me a few minutes.  

@Daan v 

I have one more solution. Please look into the below 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!


Let me know if you can apply this one in application or do you need me to build sample OML for you? 

Hi,

This looks promising.

I'm not that great with JS if you have an oml that I can download I would be thankfull

Thanks,

Daan


Okay, I will share the working one by tonight. Just occupied in something at the moment. I hope that will not be too delay for you...


Many thanks in advance 

No rush!!

Thanks a lot I will wait patiently :D


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