[BUG] - Tooltip does not work with component function and forwardRef

darkpursuer commented 4 months ago

NextUI Version

2.2.9

Describe the bug

I am using a function component which returns two siblings, and I was trying to use <Tooltip> to wrap this component, but it did not work. I also tried to use forwardRef, but although the ref is successfully passed to the Tooltip, the Tooltip did not work correctly. Please find my sample code below.

I am not really familiar with how the ref works in Tooltip, and I am not sure if this the correct way.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Create the component function:

// custom-button.tsx

export const CustomButton = forwardRef((props, ref) => {
  return (
    <>
      <Button ref={ref}>
        This is a button
      </Button>
      <Modal>
        <ModalContent isOpen={false}>
          <ModalBody>
            This is a modal
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
});

Wrap this component by <Tooltip>:

// page.tsx

export default function Page() {
  return (
    <Tooltip content="This is a tooltip">
      <CustomButton />
    </Tooltip>
  );
}

Expected behavior

When hovering on the Button inside the CustomButton component, the tooltip should show.

Screenshots or Videos

No response

Operating System Version

Linux

Browser

Chrome

linear[bot] commented 4 months ago

ENG-574 [BUG] - Tooltip does not work with component function and forwardRef

LonelyFellas commented 4 months ago

@darkpursuer I think I know the reason for this bug. It seems like the issue is caused by a problem with a third-party library import {useTooltipTriggerState} from "@react-stately/tooltip";，on onOpenChange didn't trigger when the mouse hovers over the child element. in 145line: const isOpen = state.isOpen && !isDisabled; and state.isOpen alway 'false'.