close other dropdowns when I open a new one

needtheanswers · 2025-04-25T14:43:28.911+00:00

Hi there, so I have this table cell component that opens a dropdown. When I click on the 3 dots I want it to open the dropdown of this table row but also to close the other open dropdowns. So there should only be one open dropdown How do I achieve that? I was thinking of using the repeat item index for that and create a variable with the active index but that wouldn´t be very elegant since I have multiple tables that use this component . Using the pointerleave event is also not solving the problem. Thanks

needtheanswers

3 months ago

Hi there, so I have this table cell component that opens a dropdown. When I click on the 3 dots I want it to open the dropdown of this table row but also to close the other open dropdowns. So there should only be one open dropdown How do I achieve that? I was thinking of using the repeat item index for that and create a variable with the active index but that wouldn´t be very elegant since I have multiple tables that use this component . Using the pointerleave event is also not solving the problem. Thanks
Max

3 months ago

Creating a dropdown that works anywhere is not trivial. You could try with a click outside listener. But you need custom code for that.
You can also look into the Dropdown of Spark One / Spark Core. They support that out of the box
needtheanswers

3 months ago

I´ll take a look at Spark. Thanks @Max
needtheanswers

2 months ago

Hi @Max first of all the the spark dropdown works great! One silly question: what do I need to change so my dropdown content adjusts to the width of "div-select". I´ve tried to set the width of the dropdown content to 100% but then it takes up the width of the page - then I thought changing the position of the portal would help but it didn´t. How can I fix that? Thanks a lot 🙏
@needtheanswers
Hi @Max first of all the the spark dropdown works great! One silly question: what do I need to change so my dropdown content adjusts to the width of "div-select". I´ve tried to set the width of the dropdown content to 100% but then it takes up the width of the page - then I thought changing the position of the portal would help but it didn´t. How can I fix that? Thanks a lot 🙏
Max

2 months ago

You cannot match it to the width of the div-select, because it is in a different hierarchy. You can theoretically match it to the anchor, which should result in what you are aiming for.

But.. The Dropdown does not support that, yet 😄 the select supports that. And I believe that the select would be the better option semantically
I can adjust the dropdown to support that, too.
@Max
You cannot match it to the width of the div-select, because it is in a different hierarchy. You can theoretically match it to the anchor, which should result in what you are aiming for.

But.. The Dropdown does not support that, yet 😄 the select supports that. And I believe that the select would be the better option semantically
needtheanswers

2 months ago

Ahh I get it now! And the reason why I was using the dropdown for this is because I was already using it for the table dropdown from above and thought why not lol. I´ll take a look at the select but if you could also adjust the dropdown that would be absolutely amazing 🙂 THANKS for your help!
@needtheanswers
Ahh I get it now! And the reason why I was using the dropdown for this is because I was already using it for the table dropdown from above and thought why not lol. I´ll take a look at the select but if you could also adjust the dropdown that would be absolutely amazing 🙂 THANKS for your help!
Max

2 months ago

No problemo. The select content has a match-anchor-width attribute. If you set it to true, it should have the appropriate width
@Max
No problemo. The select content has a match-anchor-width attribute. If you set it to true, it should have the appropriate width
needtheanswers

2 months ago

Just tried using the select and it works like a charm 🙏 🙏
Tod

2 months ago

Great job @needtheanswers! Your contribution to the Nordcraft Community just made you advance to Community Level 13! 🌲

close other dropdowns when I open a new one

needtheanswers

Max

needtheanswers

needtheanswers

Max

needtheanswers

Max

needtheanswers

Tod