The original workaround that @jquense added to fix this doesn't work in the shadow DOM because currentEvent is undefined

https://github.com/react-restart/ui/blob/44dc346744b37c33bd0d0309e5cd827751fce9c4/src/useClickOutside.ts#L104C9-L104C9

As a result, the click handler is processing twice

Funny I just saw that material UI has a different work around for the same issue in their ClickAway component, maybe we can try that?

Funny I just saw that material UI has a different work around for the same issue in their ClickAway component, maybe we can try that?

Unfortunately couldn't get tests to pass with the MUI approach. I'll need to drop this for now, since I'm short on time ATM.

fair enough, i don't think this is a super pressing use case anyway!

Hi, any update? Do you need some help to make test passing? I'd like to make it work as soon as possible as the whole react-bootstrap is not working in the shadowDOM.

This issue is also visible for Dropdowns. In the shadow tree, dropdown is opened and immediately closed.

FYI @mklekowski I ended up working around this by not using rootClose and then adding my own event listeners for Escape and a click outside the overlay.

Actually, I have an issue with DropdownButton, when clicking two events are triggered, first for opening and second for closing. Probably it's also possible to disable rootClose and implement it manually, but I prefer to fix it in the library directly.

@jquense can you look at the issue?

Also, the code is using Window/event which is deprecated. Maybe it can be implemented in different way?

Actually, I have an issue with DropdownButton, when clicking two events are triggered, first for opening and second for closing. Probably it's also possible to disable rootClose and implement it manually, but I prefer to fix it in the library directly.

@mklekowski do you have a workaround? I have the same issue as you, with DropdownButton.

Yes and no :) The workaround for me was to change usage of the library to mui/base-ui - it has better support for shadow dom and it looks like it's better maintained.

Yes and no :) The workaround for me was to change usage of the library to mui/base-ui - it has better support for shadow dom and it looks like it's better maintained.

Ouch - thank you anyway - I'm bound to Bootstrap though, so hopefully this gets fixed soon. My current workaround is

    <Dropdown
      autoClose="outside"
      show={showDropdown}
      onToggle={(show, meta) => {
        const target = meta.originalEvent?.target as HTMLElement;

        if (target.tagName !== "DROP-DOWN") { // "drop-down" is my custom element name
          setShowDropdown(show);
        }
      }}
    >
    </Dropdown>

This makes the Dropdown kinda work, but it doesn't close the menu when you click inside the custom element but outside the button.