[BUG] - Button with tooltip is not working with dropdown

[vitezprchal]

trafficstars

NextUI Version

"@nextui-org/dropdown": "^2.1.29" "@nextui-org/button": "^2.0.34" "@nextui-org/tooltip": "^2.0.37"

Describe the bug

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

Is there any temporary solution?

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Code:

<Dropdown>
  <DropdownTrigger>
     <Tooltip content="Tooltip content">
        <Button>Action</Button>
     </Tooltip>
  </DropdownTrigger>
  <DropdownMenu aria-label="Actions">
   <DropdownItem key="item1">Item 1</DropdownItem>
   <DropdownItem key="item2">Item 2</DropdownItem>
  </DropdownMenu>
</Dropdown>

Expected behavior

Be able to see a tooltip button with a working dropdown.

Screenshots or Videos

No response

Operating System Version

Windows 10 x64

Browser

Chrome

[linear[bot]]

ENG-1229 [BUG] - Button with tooltip is not working with dropdown

[iqingting]

Same issue, I fixed this by wrapping the Tooltip in a div and adding onPressStart={(e) => e.continuePropagation()} to the button

<DropdownTrigger>
  <div>
    <Tooltip content="Tooltip content">
      <Button onPressStart={(e) => e.continuePropagation()}>Action</Button>
    </Tooltip>
  </div>
</DropdownTrigger>

https://codesandbox.io/p/devbox/sleepy-flower-cf5gps?file=%2FApp.jsx%3A10%2C21-10%2C66

[jachinte]

@iqingting It's working for me but keyboard events stopped working. Do you know how to fix this? -- Before, I was able to open the dropdown by focusing the button and pressing enter.

[iqingting]

@iqingting It's working for me but keyboard events stopped working. Do you know how to fix this? -- Before, I was able to open the dropdown by focusing the button and pressing enter.

I have no idea, this issue should be fixed by the NextUI team.