fix(components): fix tooltip staying open, add keys, fix AnimatePresence

heroui-inc · Jan 2, 2025 · e6408d7 · e6408d7
1 parent 0eb96f6
commit e6408d7
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/packages/components/tooltip/src/tooltip.tsx b/packages/components/tooltip/src/tooltip.tsx
@@ -61,6 +61,7 @@ const Tooltip = forwardRef<"div", TooltipProps>((props, ref) => {
     <div ref={tooltipRef} id={id} style={style}>
       <LazyMotion features={domAnimation}>
         <m.div
+          key={id}
           animate="enter"
           exit="exit"
           initial="exit"
@@ -79,16 +80,16 @@ const Tooltip = forwardRef<"div", TooltipProps>((props, ref) => {
   return (
     <>
       {trigger}
-      {disableAnimation && isOpen ? (
-        <OverlayContainer portalContainer={portalContainer}>
+      {disableAnimation ? (
+        isOpen && <OverlayContainer portalContainer={portalContainer}>
           <div ref={tooltipRef} id={id} style={style} {...otherTooltipProps}>
             <Component {...getTooltipContentProps()}>{content}</Component>
           </div>
         </OverlayContainer>
       ) : (
         <AnimatePresence>
           {isOpen ? (
-            <OverlayContainer portalContainer={portalContainer}>{animatedContent}</OverlayContainer>
+            <OverlayContainer key={id} portalContainer={portalContainer}>{animatedContent}</OverlayContainer>
           ) : null}
         </AnimatePresence>
       )}

diff --git a/packages/components/tooltip/stories/tooltip.stories.tsx b/packages/components/tooltip/stories/tooltip.stories.tsx
@@ -263,6 +263,35 @@ const ControlledTemplate = (args: TooltipProps) => {
   );
 };
 
+const ManyTemplate = (args: TooltipProps) => (
+  <div className="flex flex-col gap-2">
+    <Tooltip {...args} content="Tooltip 1" closeDelay={0} openDelay={0}>
+      <Button>Hover me</Button>
+    </Tooltip>
+    <Tooltip {...args} content="Tooltip 2" closeDelay={0} openDelay={0}>
+      <Button>Then hover me</Button>
+    </Tooltip>
+    <Tooltip {...args} content="Tooltip 3" closeDelay={0} openDelay={0}>
+      <Button>Then hover me</Button>
+    </Tooltip>
+    <Tooltip {...args} content="Tooltip 4" closeDelay={0} openDelay={0}>
+      <Button>Then hover me</Button>
+    </Tooltip>
+    <Tooltip {...args} content="Tooltip 5" closeDelay={0} openDelay={0}>
+      <Button>Then hover me</Button>
+    </Tooltip>
+    <Tooltip {...args} content="Tooltip 6" closeDelay={0} openDelay={0}>
+      <Button>Then hover me</Button>
+    </Tooltip>
+    <Tooltip {...args} content="Tooltip 7" closeDelay={0} openDelay={0}>
+      <Button>Then hover me</Button>
+    </Tooltip>
+    <Tooltip {...args} content="Tooltip 8" closeDelay={0} openDelay={0}>
+      <Button>Then hover me</Button>
+    </Tooltip>
+  </div>
+);
+
 export const Default = {
   args: {
     ...defaultProps,
@@ -395,3 +424,11 @@ export const Disabled = {
     isDisabled: true,
   },
 };
+
+export const Many = {
+  render: ManyTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};