Fixed #830 - Improve active route detection in TabMenu

api-generator/components/tabmenu.js

@@ -4,6 +4,12 @@ const TabMenuProps = [
         type: "array",
         default: "null",
         description: "An array of menuitems."
+    },
+    {
+        name: "exact",
+        type: "boolean",
+        default: true,
+        description: "Defines if active route highlight should match the exact route path."
     }
 ];
 

src/components/tabmenu/TabMenu.d.ts

@@ -1,5 +1,6 @@
 interface TabMenuProps {
     model?: any[];
+    exact?: boolean;
 }
 
 declare class TabMenu {

src/components/tabmenu/TabMenu.vue

@@ -2,14 +2,16 @@
     <div class="p-tabmenu p-component">
         <ul ref="nav" class="p-tabmenu-nav p-reset" role="tablist">
             <template v-for="(item,i) of model" :key="item.label + '_' + i.toString()">
-                <li :class="getItemClass(item)" :style="item.style" v-if="visible(item)" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
-                    <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+                <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
+                    <li :class="getRouteItemClass(item,isActive,isExactActive)" :style="item.style" v-if="visible(item)" role="tab">
                         <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation" v-ripple>
                             <span :class="getItemIcon(item)" v-if="item.icon"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
                         </a>
-                    </router-link>
-                    <a v-else :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)" role="presentation" :tabindex="item.disabled ? null : '0'" v-ripple>
+                    </li>
+                </router-link>
+                <li v-else-if="visible(item)" :class="getItemClass(item)" role="tab">
+                    <a :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)" role="presentation" :tabindex="item.disabled ? null : '0'" v-ripple>
                         <span :class="getItemIcon(item)" v-if="item.icon"></span>
                         <span class="p-menuitem-text">{{item.label}}</span>
                     </a>
@@ -30,6 +32,10 @@ export default {
 		model: {
             type: Array,
             default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
         }
     },
     mounted() {
@@ -38,6 +44,11 @@ export default {
     updated() {
         this.updateInkBar();
     },
+    watch: {
+        $route() {
+            setTimeout(() => this.updateInkBar(), 50);
+        }
+    },
     methods: {
         onItemClick(event, item, navigate) {
             if (item.disabled) {
@@ -56,12 +67,14 @@ export default {
                 navigate(event);
             }
         },
-        isActive(item) {
-            return this.activeRoute === item.to;
-        },
         getItemClass(item) {
             return ['p-tabmenuitem', item.class, {
-                'p-highlight': this.isActive(item),
+                'p-disabled': item.disabled
+            }];
+        },
+        getRouteItemClass(item, isActive, isExactActive) {
+            return ['p-tabmenuitem', item.class, {
+                 'p-highlight': this.exact ? isExactActive : isActive,
                 'p-disabled': item.disabled
             }];
         },
@@ -71,34 +84,22 @@ export default {
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
         },
-        findActiveTabIndex() {
-            if (this.model) {
-                for (let i = 0; i < this.model.length; i++) {
-                    if (this.isActive(this.model[i])) {
-                        return i;
-                    }
+        updateInkBar() {
+            let tabs = this.$refs.nav.children;
+            let inkHighlighted = false;
+            for (let i = 0; i < tabs.length; i++) {
+                let tab = tabs[i];
+                if (DomHandler.hasClass(tab, 'p-highlight')) {
+                    this.$refs.inkbar.style.width = DomHandler.getWidth(tab) + 'px';
+                    this.$refs.inkbar.style.left =  DomHandler.getOffset(tab).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
+                    inkHighlighted = true;
                 }
             }
 
-            return null;
-        },
-        updateInkBar() {
-            let activeTabIndex = this.findActiveTabIndex();
-            if (activeTabIndex !== null) {
-                let tabHeader = this.$refs.nav.children[activeTabIndex];
-                this.$refs.inkbar.style.width = DomHandler.getWidth(tabHeader) + 'px';
-                this.$refs.inkbar.style.left =  DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
-            }
-            else {
+            if (!inkHighlighted) {
                 this.$refs.inkbar.style.width = '0px';
                 this.$refs.inkbar.style.left =  '0px';
             }
-
-        }
-    },
-    computed: {
-        activeRoute() {
-            return this.$route.path;
         }
     },
     directives: {

src/views/tabmenu/TabMenuDoc.vue

@@ -52,6 +52,12 @@ export default {
                         <td>array</td>
                         <td>null</td>
                         <td>An array of menuitems.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Defines if active route highlight should match the exact route path.</td>
                     </tr>
 				</tbody>
 			</table>