search

formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
120 stars 4 forks source link

Autocomplete issues in ShadowDOM #319

Closed omgovich closed 2 months ago

omgovich commented 2 months ago

Describe the bug

While DropdownMenu component works perfectly in ShadowDOM, Autocomplete (which also has containerRef support) seems to have issues with a value selection.

To Reproduce

https://codesandbox.io/p/sandbox/reshaped-autocomplete-shadow-dom-d9fcrc

Expected behavior

The clicked value is selected. Related event handlers are triggered.

Screenshots

https://github.com/user-attachments/assets/f813fcce-3893-4623-a1d7-b95e22dd4d9b

blvdmitry commented 2 months ago

Very close to getting this fixed now. There is currently no handling of anything besides the dropdowns positioning inside the shadow dom, so I've added support for the correct hotkeys handling for both components events and trap focus. So as a side effect, trap focus should correctly inside shadow dom for other use cases too. This seems to have also fixed the issue when some of the dropdowns are not closing if there is a dropdown using shadow dom on the page.

Missing part right now is to make sure it works when clicking on the item (which is what you have originally reported) and I'm sure at this point it's just a minor change in the code that's left to make it work.

blvdmitry commented 2 months ago

Figured it out now, it was caused by the useOnClickOutside which was also not working with the shadow dom properly.

https://github.com/user-attachments/assets/fb13f9b4-c958-4f8c-b763-3b24a4c127b3

Going to structure the stories a bit now and planning to ship in the next patch

blvdmitry commented 2 months ago

Published 3.2.0-canary.5 with the corrected shadow dom behavior and also automatic shadow root detection so you don't have to pass the containerRef anymore to each component inside