You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When user clicks on the button to open the menu in the following code, the <Button /> will have a sticky data-hover that won't go away even even when the user closes the menu, click elsewhere, or pretty much anything. The only thing that will remove data-hover is for the user to hover the button again and un-hover it.
functionDropdownMenu(){const[isOpen,setIsOpen]=useState(false);constIcon=isOpen ? Close : Open;return(<MenuTriggerisOpen={isOpen}onOpenChange={setIsOpen}><Button><Icon/></Button><Popover><Menu><MenuItemid="a">A</MenuItem><MenuItemid="b">B</MenuItem></Menu></Popover></MenuTrigger>);}
I tried the same code without a dynamic <Icon />, it works as expected without any problems.
🤔 Expected Behavior?
There should be no data-hover on <Button /> unless the user closes the menu and hovers the button again.
😯 Current Behavior
When user clicks on the button to open the menu, the <Button /> will have a sticky data-hover that won't go away even even when the user closes the menu, click elsewhere, or pretty much anything. The only thing that will remove data-hover is for the user to hover the button again and un-hover it.
💁 Possible Solution
I'm not sure what's causing this internally but without changing children, it works as expected.
🔦 Context
No response
🖥️ Steps to Reproduce
Run this code, click the button with mouse to open menu and see data-hover being sticky in element inspector.
functionDropdownMenu(){const[isOpen,setIsOpen]=useState(false);constIcon=isOpen ? Close : Open;return(<MenuTriggerisOpen={isOpen}onOpenChange={setIsOpen}><Button><Icon/></Button><Popover><Menu><MenuItemid="a">A</MenuItem><MenuItemid="b">B</MenuItem></Menu></Popover></MenuTrigger>);}
Version
react-aria-components v1.1.1
What browsers are you seeing the problem on?
Chrome
If other, please specify.
I didn't test on other browsers but I suspect it will have the same issue
What operating system are you using?
macOS Sonoma
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
The text was updated successfully, but these errors were encountered:
Seems unrelated to the changing children. I tried changing the children to text which would change and didn't see the issue. I also tried keeping it as one image that didn't change. Again, didn't see the issue.
I then tried setting pointerEvents: 'none' on the image, that also fixed the issue. So I think you can just do that to your icons.
Provide a general summary of the issue here
When user clicks on the button to open the menu in the following code, the
<Button />
will have a stickydata-hover
that won't go away even even when the user closes the menu, click elsewhere, or pretty much anything. The only thing that will removedata-hover
is for the user to hover the button again and un-hover it.I tried the same code without a dynamic
<Icon />
, it works as expected without any problems.🤔 Expected Behavior?
There should be no
data-hover
on<Button />
unless the user closes the menu and hovers the button again.😯 Current Behavior
When user clicks on the button to open the menu, the
<Button />
will have a stickydata-hover
that won't go away even even when the user closes the menu, click elsewhere, or pretty much anything. The only thing that will removedata-hover
is for the user to hover the button again and un-hover it.💁 Possible Solution
I'm not sure what's causing this internally but without changing children, it works as expected.
🔦 Context
No response
🖥️ Steps to Reproduce
Run this code, click the button with mouse to open menu and see
data-hover
being sticky in element inspector.Version
react-aria-components v1.1.1
What browsers are you seeing the problem on?
Chrome
If other, please specify.
I didn't test on other browsers but I suspect it will have the same issue
What operating system are you using?
macOS Sonoma
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
The text was updated successfully, but these errors were encountered: