#5639 TabMenu inkbar fixes for material design

primefaces · Dec 25, 2023 · c64bd04 · c64bd04
1 parent 028c35c
commit c64bd04
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
@@ -73,10 +73,23 @@ export const TabMenu = React.memo(
 
         const updateInkBar = () => {
             if (props.model) {
-                const tabHeader = tabsRef.current[`tab_${activeIndex}`];
+                let tabs = navRef.current.children;
+                let inkHighlighted = false;
 
-                inkbarRef.current.style.width = DomHandler.getWidth(tabHeader) + 'px';
-                inkbarRef.current.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(navRef.current).left + 'px';
+                for (let i = 0; i < tabs.length; i++) {
+                    let tab = tabs[i];
+
+                    if (DomHandler.getAttribute(tab, 'data-p-highlight')) {
+                        inkbarRef.current.style.width = DomHandler.getWidth(tab) + 'px';
+                        inkbarRef.current.style.left = DomHandler.getOffset(tab).left - DomHandler.getOffset(navRef.current).left + 'px';
+                        inkHighlighted = true;
+                    }
+                }
+
+                if (!inkHighlighted) {
+                    inkbarRef.current.style.width = '0px';
+                    inkbarRef.current.style.left = '0px';
+                }
             }
         };