CODEWITHSUNDEEP
vue.jsvuetify.jsvue-router
Grant Martin
Grant Martin

Reputation: 135

Vuetify bottom navigation not removing active state on route change after hard refresh

In my app I have a bottom navigation component set up as such:

<v-bottom-navigation
  v-else
  background-color="overlay"
  grow
  app
  color="primary"
>
  <v-btn
    v-for="(route, key) in routes"
    ref="link"
    :key="'route' + key"
    :to="route.to"
    min-width="48"
    class="px-0"
  >
    <span v-if="$vuetify.breakpoint.smAndUp">{{ route.name }}</span>
    <v-icon>{{ route.icon }}</v-icon>
  </v-btn>
</v-bottom-navigation>

This works well, I can use it to navigate around my app as intended. When clicking one of the buttons on the bottom navigation, the button state updates as it should to show that it is active (primary color).

My routes are defined as follows:

routes: [
  { icon: mdiViewDashboard, name: 'Dashboard', to: '/dashboard' },
  { icon: mdiCart, name: 'Orders', to: '/orders' },
  { icon: mdiDolly, name: 'Receiving', to: '/receiving' },
  { icon: mdiClipboardText, name: 'Tasks', to: '/tasks' },
  { icon: mdiTruck, name: 'Deliveries', to: '/deliveries' },
],

I have an additional route /settings which is not part of this main navigation, but defined on the header bar of my application as such:

<v-btn
  aria-label="Settings"
  icon
  to="/settings"
>
  <v-icon>{{ mdiCog }}</v-icon>
</v-btn>

Since the settings button/router link is not part of the bottom navigation, when I click on the settings button, it disables the active state on the buttons in the bottom navigation, as it should since it is not part of the bottom navigation.

Here is where the odd behavior occurs:

If I am in one of the routes defined on the bottom navigation, and hard refresh the page I refresh to the proper location. From here, if I click the settings button, the router displays the settings as it should, but the active state on the bottom navigation of the stale state still shows. This only occurs on a hard refresh, if I select a bottom navigation route, and then go to settings, it removes the active state from the bottom navigation button.

In my research I thought it may be an issue with the exact property for the router links, but it seems to make no different.

Additionally, I set a breakpoint to display the bottom navigation on small and below, if I stretch the window to hide the bottom navigation, then shrink it to re-show, when the component is shown again, it has the proper state.

Upvotes: 1

Views: 1875

Answers (1)

yurish
yurish

Reputation: 919

Reloading the page isn't the only way to reproduce the bug. The buttons in the navigation group appear to be toggleable both by VItemGroup logic and VBtn's routable mixin. You can replicate the problem by clicking any nav button two times and routing to /settings after that. If you inspect the element in that state, the active class v-btn--active is duplicated 3 times. Routing to another page removes only the exact matches of v-btn--active v-btn--active, leaving the third one on the element.

Clearly, this is not an intended behavior.

But the workaround is quite simple. Setting every button's active-class prop to anything but 'v-btn--active' will do the trick.

So, for example:

<v-btn
    v-for="(route, key) in routes"
    ref="link"
    :key="'route' + key"
    :to="route.to"
    min-width="48"
    class="px-0"
    active-class=""
>
    <span v-if="$vuetify.breakpoint.smAndUp">{{ route.name }} </span>
    <v-icon>{{ route.icon }}</v-icon>
</v-btn>

Upvotes: 3

Related Questions