Question about useUrlFragment

[DerManoMann]

Hi there,

Despite setting the option like this:

      <tabs :options="{ useUrlFragment: false }">

the hash/fragment part of the url does change when selecting a tab. I would have expected that it is not set/modified at all?

├── vitepress@0.22.4
└── vue3-tabs-component@1.0.7
│ └─┬ vue@3.2.33

I've done some debugging and the only place (that I can find) where the option is actually used is in selectTab() in Tabs.vue:

    const selectTab = (selectedTabHash, event) => {
      if (event && !props.options.useUrlFragment) {
        event.preventDefault();
      }
      // ...

In my case (using Firefox) event is undefined and therefore I cannot see how changing useUrlFragment would make any difference.

[DerManoMann]

Some more digging reveals that there are actally two events handled:

• hashchange: this, I guess, will make page loads with existing hash work
• click: on click handler - this one actually has an event passed into selectTab()

Still, when stopping the click in the debugger, the click event (which is first) only happens after the location hash is already updated. That feels wrong.

Sorry for writing as I go - mostly trying to explain this to myself :)

[tobystokes]

I'm going to piggyback on this issue, as it's a related question about useUrlFragment.
I had previously set useUrlFragment to false, to stop UI jumping to the anchor ID, but it seems that setting the hash fragment is the only way to programmatically update the tabs from _outside_the tabs component.
I suggest that the option to keep the url fragment updated be a separate option from one intended to prevent the default linking?
I'm also wondering whether it would be useful to provide the selectTab method to use directly for changing tabs, if you're not using the fragment method.

[Jacobs63]

Greetings,

when setting the options on a Tabs component prop as:

:options="{useUrlFragment: false}"

The hash does not change on neither latest Chrome nor Firefox - I am unable to reproduce the mentioned issue.

I'll test providing the selectTab method outside, as it is indeed not possible to change the active tab programatically when URL fragment is disabled.

[Jacobs63]

Hello @tobystokes,

the selectTab method is in fact already exposed by the Tabs component.
All you need to do is reference the component by name and you can then access the method through the reference's value.
I've updated the README and demo with an example.