Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sticky data-hover on MenuTrigger component when its children changes #5962

Open
phuctm97 opened this issue Feb 28, 2024 · 1 comment
Open
Labels
bug Something isn't working has workaround

Comments

@phuctm97
Copy link

phuctm97 commented Feb 28, 2024

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 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.

function DropdownMenu() {
  const [isOpen, setIsOpen] = useState(false);
  const Icon = isOpen ? Close : Open;
  
  return (
    <MenuTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
      <Button>
        <Icon />
      </Button>
      <Popover>
        <Menu>
          <MenuItem id="a">A</MenuItem>
          <MenuItem id="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.

function DropdownMenu() {
  const [isOpen, setIsOpen] = useState(false);
  const Icon = isOpen ? Close : Open;
  
  return (
    <MenuTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
      <Button>
        <Icon />
      </Button>
      <Popover>
        <Menu>
          <MenuItem id="a">A</MenuItem>
          <MenuItem id="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

@snowystinger
Copy link
Member

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.

@snowystinger snowystinger added bug Something isn't working has workaround labels Feb 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working has workaround
Projects
None yet
Development

No branches or pull requests

2 participants