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');
}
}
}
}

Hi Daan,

Try the one that I send in attach.

Hope it helps you.

Best Regards,

Nuno R

Dropdownv1.oml

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


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

Champion

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. 

Champion

Hope So, would be great if Daan can confirm else we will look into some other solution for him. 


Hi,

My apologies for the late reply. I have been making changes to the dropdowns to fit my purpose and they have been working perfectly! Thanks a lot.

One more thing left to do is adding an INPUT so that i can use it to search in the dropdown. I think this will give problems because the dropdown is supposed to close when you click everywhere. I will try and figure this out myself and if i cannot get it to work i will try and contact @Nuno Rodrigues  or @Manish Gupta

I posted a screenshot below. This is how the dropdown looks right now :)

Thanks a lot for the help you guys have given me! :)

Screenshot20210521at10.31.12.png

Hello @Daan v,

Thanks for the reply.

If you need something send me a message.

Best Regards,

Nuno R

Champion

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

Champion

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.

Champion

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?

Champion

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.  

Champion

@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


Champion

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.