Sticky data-hover on MenuTrigger component when its children changes

[phuctm97]

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]

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.