fix(tooltip): fix re-render errors when removing the label

Remove render short circuit when label is falsy to avoid react hook re-render errors
lumapps · Sep 13, 2024 · 8f8d52a · 8f8d52a
1 parent ad5386f
commit 8f8d52a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+-   `Tooltip`: fix re-render errors when removing the label.
+
 ## [3.9.0][] - 2024-09-03
 
 ### Added

diff --git a/packages/lumx-react/src/components/tooltip/Tooltip.tsx b/packages/lumx-react/src/components/tooltip/Tooltip.tsx
@@ -66,9 +66,9 @@ const ARROW_SIZE = 8;
  */
 export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
     const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;
-    // Disable in SSR or without a label.
-    if (!DOCUMENT || !label) {
-        return <TooltipContextProvider>{children}</TooltipContextProvider>;
+    // Disable in SSR.
+    if (!DOCUMENT) {
+        return <>{children}</>;
     }
 
     const id = useId();
@@ -87,7 +87,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
 
     const position = attributes?.popper?.['data-popper-placement'] ?? placement;
     const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);
-    const isOpen = isActivated || forceOpen;
+    const isOpen = (isActivated || forceOpen) && !!label;
     const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id, label);
 
     return (

diff --git a/packages/lumx-react/src/components/tooltip/useInjectTooltipRef.tsx b/packages/lumx-react/src/components/tooltip/useInjectTooltipRef.tsx
@@ -19,12 +19,14 @@ export const useInjectTooltipRef = (
     setAnchorElement: (e: HTMLDivElement) => void,
     isOpen: boolean | undefined,
     id: string,
-    label: string,
+    label?: string | null | false,
 ): ReactNode => {
     // Only add description when open
     const describedBy = isOpen ? id : undefined;
 
     return useMemo(() => {
+        if (!label) return children;
+
         // Non-disabled element
         if (React.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {
             const ref = mergeRefs((children as any).ref, setAnchorElement);