Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Vue] - Tabs not working properly when conditionally updating the `selected-index` prop from the `change` event

See original GitHub issue

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.7.1

What browser are you using?

Chrome Latest

Reproduction URL

https://codesandbox.io/s/awesome-thompson-ytuh1o?file=/src/App.vue

Describe your issue

I have forms within TabPanel and I want to implement a “Discard changes” confirmation before switching to another tab, if there are unsaved changes.

I tried implementing this with a custom modal and the built in one, but it doesn’t work properly.

When I press Cancel, instead of getting back to the browser, the click event triggers again and again and it enters a permanent loop.

What I’m trying to use is a controlled component, I’m using the change event to conditionally determine whether or not the user should move to the new tab.

Issue Analytics

State:
Created a year ago
Comments:5

Top GitHub Comments

1reaction

RobinMalfaitcommented, Sep 30, 2022

Hey!

I reworked the internals of the Tab component a bit so that it only changes tabs when you use your arrow keys or when you actually click it. Not when you are just “focusing” it. This was an (incorrect) implementation detail that should now be fixed.

This should be fixed by #1887, and will be available in the next release.

You can already try it using:

npm install @headlessui/react@insiders.
npm install @headlessui/vue@insiders.

1reaction

gecklundcommented, Sep 20, 2022

I just ran into this on the React side of things and the best way I found to get it working was to use the manual option for the Tab.Group. This seems to work in your Vue example even though it leaves focus on the wrong tab in the end. That seems like an easier problem to solve though…

Top Results From Across the Web

Tabs don't update when array order changes #3506 - GitHub

Describe the bug doesn't update reliably when the array changes. If the number of elements changes, the update seems to work.

Data value not updated with tabs in Vue js - Stack Overflow

Hi guys Im trying to make my custom tabs, with Vue js but Im having a problem since like my data property is...

Tabs - Headless UI

Each component exposes information about its current state via slot props that you can use to conditionally apply different styles or render different...

Vue conditional rendering: editing existing todos

Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing...

Creating Your Own Reusable Vue Tabs Component - LearnVue

To do this, we'll have to add a prop in our Tabs. vue file. Just add the following code to your export default....