[Tabs] Do not display the indicator before layout is settled (#1027)

mui · Dec 12, 2024 · 490011e · 490011e
1 parent f44b24d
commit 490011e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/packages/react/src/tabs/indicator/prehydrationScript.min.ts b/packages/react/src/tabs/indicator/prehydrationScript.min.ts
@@ -2,4 +2,4 @@
 // To update it, modify the corresponding source file and run `pnpm inline-scripts`.
 
 // prettier-ignore
-export const script = '!function(){const t=document.currentScript.previousElementSibling;if(!t)return;const e=t.closest(\'[role="tablist"]\');if(!e)return;const o=e.querySelector(\'[data-selected="true"]\');if(!o)return;const{left:i,right:n,top:r,bottom:c,width:l}=o.getBoundingClientRect(),{left:u,right:s,top:f,bottom:g,width:d}=e.getBoundingClientRect();if(0===l||0===d)return;const h=s-n,p=r-f,b=g-c,a=n-i,m=c-r;function w(e,o){t.style.setProperty(`--active-tab-${e}`,`${o}px`)}w("left",i-u),w("right",h),w("top",p),w("bottom",b),w("width",a),w("height",m)}();';
+export const script = '!function(){const t=document.currentScript.previousElementSibling;if(!t)return;const e=t.closest(\'[role="tablist"]\');if(!e)return;const i=e.querySelector("[data-selected]");if(!i)return;const{left:o,right:n,top:r,bottom:c,width:l}=i.getBoundingClientRect(),{left:u,right:s,top:d,bottom:f,width:g}=e.getBoundingClientRect();if(0===l||0===g)return;const h=s-n,b=r-d,p=f-c,m=n-o,a=c-r;function v(e,i){t.style.setProperty(`--active-tab-${e}`,`${i}px`)}v("left",o-u),v("right",h),v("top",b),v("bottom",p),v("width",m),v("height",a),m>0&&a>0&&t.removeAttribute("hidden")}();';
diff --git a/packages/react/src/tabs/indicator/prehydrationScript.template.js b/packages/react/src/tabs/indicator/prehydrationScript.template.js
@@ -9,7 +9,7 @@
     return;
   }
 
-  const activeTab = list.querySelector('[data-selected="true"]');
+  const activeTab = list.querySelector('[data-selected]');
   if (!activeTab) {
     return;
   }
@@ -51,4 +51,8 @@
   setProp('bottom', bottom);
   setProp('width', width);
   setProp('height', height);
+
+  if (width > 0 && height > 0) {
+    indicator.removeAttribute('hidden');
+  }
 })();
diff --git a/packages/react/src/tabs/indicator/useTabsIndicator.ts b/packages/react/src/tabs/indicator/useTabsIndicator.ts
@@ -98,14 +98,17 @@ export function useTabsIndicator(
     } as React.CSSProperties;
   }, [left, right, top, bottom, width, height, isTabSelected]);
 
+  const displayIndicator = isTabSelected && width > 0 && height > 0;
+
   const getRootProps = React.useCallback(
     (externalProps = {}) => {
       return mergeReactProps<'span'>(externalProps, {
         role: 'presentation',
         style,
+        hidden: !displayIndicator, // do not display the indicator before the layout is settled
       });
     },
-    [style],
+    [style, displayIndicator],
   );
 
   return {