feat(Tooltip): fix dynamic width

kronostechnologies · Apr 3, 2024 · ec542a1 · ec542a1
1 parent 045665e
commit ec542a1
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 10 deletions.
diff --git a/packages/react/src/components/tooltip/tooltip.test.tsx.snap b/packages/react/src/components/tooltip/tooltip.test.tsx.snap
@@ -220,7 +220,6 @@ exports[`Tooltip Has default desktop styles (defaultOpen) 1`] = `
     data-testid="tooltip-content-container"
     id="uuid1"
     isMobile={false}
-    key="1"
     role="tooltip"
     style={
       {
@@ -493,7 +492,6 @@ exports[`Tooltip Has default desktop styles 1`] = `
     data-testid="tooltip-content-container"
     id="uuid1"
     isMobile={false}
-    key="1"
     role="tooltip"
     style={
       {
@@ -770,7 +768,6 @@ exports[`Tooltip Has mobile styles (defaultOpen) 1`] = `
     data-testid="tooltip-content-container"
     id="uuid1"
     isMobile={true}
-    key="1"
     role="tooltip"
     style={
       {
@@ -1043,7 +1040,6 @@ exports[`Tooltip Has mobile styles 1`] = `
     data-testid="tooltip-content-container"
     id="uuid1"
     isMobile={true}
-    key="1"
     role="tooltip"
     style={
       {

diff --git a/packages/react/src/components/tooltip/tooltip.tsx b/packages/react/src/components/tooltip/tooltip.tsx
@@ -232,14 +232,9 @@ export const Tooltip: FunctionComponent<PropsWithChildren<TooltipProps>> = ({
     const [tooltipTimeout, setTooltipTimeout] = useState<NodeJS.Timeout | undefined>();
     const [controlledTooltipOpen, setControlledTooltipOpen] = useState<boolean>();
     const [isClicked, setIsClicked] = useState<boolean>(false);
-    const [tooltipKey, setTooltipKey] = useState<number>(0);
     const currentLabel = isClicked ? (confirmationLabel ?? label) : label;
     const tooltipVariant = (mode === 'confirm' && isClicked) ? 'success' : 'normal';
 
-    useEffect(() => {
-        setTooltipKey((prevKey) => prevKey + 1);
-    }, [currentLabel]);
-
     const getTooltipTriggerType = useCallback((): TriggerType | null => {
         if (disabled) {
             return null;
@@ -259,6 +254,10 @@ export const Tooltip: FunctionComponent<PropsWithChildren<TooltipProps>> = ({
         delayShow: delayed ? titleDelay : undefined,
     }, { modifiers });
 
+    useEffect(() => {
+        popperTooltip.update?.();
+    }, [currentLabel, popperTooltip]);
+
     const openTooltip = useCallback((): void => {
         if (delayed && !disabled) {
             setTooltipTimeout(() => setTimeout(() => setControlledTooltipOpen(true), titleDelay));
@@ -370,7 +369,6 @@ export const Tooltip: FunctionComponent<PropsWithChildren<TooltipProps>> = ({
                 isMobile={isMobile}
                 variant={tooltipVariant}
                 visible={popperTooltip.visible}
-                key={tooltipKey}
                 {...popperTooltip.getTooltipProps() /* eslint-disable-line react/jsx-props-no-spreading */}
             >
                 <TooltipArrow