can't use outsideClickIgnoreClass with multiple class names

[oren raz]

will be great to be able to pass multiple class names for outsideClickIgnoreClass like:
outsideClickIgnoreClass="class-a class-b".

you can change the function isNodeFound to check for multiple appearance of classes

[Pomax]

can you explain the use case?

[oren raz]

Sure. I have a react dialog modal i want to close by clicking outside. This modal has inner content - an angular app, and it has a dropdown menu. so i want that selecting a value from those dropdown will not close the modal. So i added the ignore class with the dropdown class name, And it worked fine. But now i host another app into my modal and it has its own custom drop down with different class name. Selecting a value from there will close my modal. What i want is to add array of class names to outsideclickignoreclass. I looked at the source code. You have a function that check if classlist.contains(ignoreClass) If you will pass to it: ClassList.contains(['class-a'],[`class-b']) The contains will look for all class names.

…

On Mon, 7 Jan 2019, 19:34 Pomax ***@***.*** wrote: can you explain the use case? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#305 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AP-n2W1h5384qRP5YNRxLxZpnAVyCRT2ks5vA4UPgaJpZM4Zzbzx> .

[Pomax]

I'm not sure I understand. Are you saying these apps exist inside the modal? If so, clicks will already originate inside the modal and outside clicks shouldn't even be detected (because there are none). If they're not, then why can you not add the outsideclickignore class to both dropdowns' class list? You're not stuck with "one class" for elements, just say <Dropdown1 class="your classes outsideclickignore" ...> and <Dropdown2 class="other stuff outsideclickignore" ...> and now clicks on either of those drop downs won't trigger the outsideclick handler.

[oren raz]

Your approach is right. But i do not own the apps i am hosting. We are working with micro front end approach and so many apps are written in different languages and owned by different teams. My react modal ha no controll of the source code of the angular app it hosts. If i had access to their sourcr code, i woulf have add the class as you suggested. Anither example is packages we consume as node modules- again, source code i unfortunately do not own

…

On Mon, 7 Jan 2019, 21:28 Pomax ***@***.*** wrote: I'm not sure I understand. Are you saying these apps exist *inside* the modal? If so, clicks will already originate inside the modal and outside clicks shouldn't even be detected (because there are none). If they're not, then why can you not add the outsideclickignore class to both dropdowns' class list? You're not stuck with "one class" for elements, just say <Dropdown1 class="your classes outsideclickignore" ...> and <Dropdown2 class="other stuff outsideclickignore" ...> and now clicks on either of those drop downs won't trigger the outsideclick handler. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#305 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AP-n2Wme9kHuJ3Sb-leKjCZyUXbJ19ekks5vA5_lgaJpZM4Zzbzx> .

[oren raz]

In my case for example. The angular inner app appends the drop down to the dom body , for several reasons. And that is why it is not part of the react modal. And click on theem to select a value will close the modal. Since its not my code, i cant add class to them

…

On Mon, 7 Jan 2019, 21:33 oren raz ***@***.*** wrote: Your approach is right. But i do not own the apps i am hosting. We are working with micro front end approach and so many apps are written in different languages and owned by different teams. My react modal ha no controll of the source code of the angular app it hosts. If i had access to their sourcr code, i woulf have add the class as you suggested. Anither example is packages we consume as node modules- again, source code i unfortunately do not own On Mon, 7 Jan 2019, 21:28 Pomax ***@***.*** wrote: > I'm not sure I understand. Are you saying these apps exist *inside* the > modal? If so, clicks will already originate inside the modal and outside > clicks shouldn't even be detected (because there are none). If they're not, > then why can you not add the outsideclickignore class to both dropdowns' > class list? You're not stuck with "one class" for elements, just say <Dropdown1 > class="your classes outsideclickignore" ...> and <Dropdown2 class="other > stuff outsideclickignore" ...> and now clicks on either of those drop > downs won't trigger the outsideclick handler. > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#305 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AP-n2Wme9kHuJ3Sb-leKjCZyUXbJ19ekks5vA5_lgaJpZM4Zzbzx> > . >

[Pomax]

That's a better explanation of the situation. I'm pretty sure that's a valid use case for allowing "one of any" ignore classes rather than just a single fixed string

[laughing]

I have the same situation, and I am looking forward to be able to pass multiple class names for outsideClickIgnoreClass.

[Quocnamit]

Me too. I have the same situation, and I am looking forward to be able to pass multiple class names for outsideClickIgnoreClass.

In UI, we can imagine that some elements are inside their same parent element. but in DOM, they are placed in different places.

[Deleted user]

Not for every case, but instead of passing multiple classes to outsideClickIgnoreClass you could try "lifting things up" by wrapping the required elements into a single parent element which you then ignore.