ark icon indicating copy to clipboard operation
ark copied to clipboard

Buggy interaction between **controlled** floating UI components

Open pnd280 opened this issue 1 year ago • 0 comments

Description

A bug has been identified in the interaction between multiple controlled floating UI components. When two or more controlled components (such as Select, Popover, or other similar elements) are present on a page, opening a second component unexpectedly closes both the first and second components, rather than just closing the first one.

https://github.com/user-attachments/assets/d018be94-a80b-48a4-8407-e2325a20a348

Link to Reproduction

https://codesandbox.io/p/sandbox/ark-ui-v3-floating-components-bugs-73nmpv


Steps to Reproduce

  1. Click to open the first Select component.
  2. Without closing the first, click to open the second Select component.

Expected Behavior

The second Select should open while the first Select automatically closes.

Actual Behavior

The following sequence occurs:

  1. The second Select opens
  2. The first Select closes
  3. The second Select unexpectedly closes as well

Additional Notes

  • This issue has been confirmed to affect Popover components as well.
  • It may potentially impact other floating UI elements such as:
    • Menu
    • HoverCard
    • Other similar components

Impact

This bug disrupts the expected interaction flow between multiple floating UI components, potentially affecting user experience and interface functionality.


Ark UI Version

3.6.2

Framework

  • [X] React
  • [ ] Solid
  • [ ] Vue

Browser

Chrome, Firefox

Additional Information

No response

pnd280 avatar Aug 05 '24 13:08 pnd280