[Vue] - Tabs not working properly when conditionally updating the selected-index prop from the change event
#1858
Comments
selected-index prop from the change event
|
Hey! Thank you for your bug report! This is an interesting "bug". The issue is not that there is some infinite loop, however the issue is the moment you press The tricky part is that there is no proper way of solving this in Headless UI itself without making assumptions. We can't just focus "nothing" or focus the first tab because that will also trigger the One thing you can do is if you implement it with a custom dialog where you have full control, then you can choose what to do when you cancel (e.g.: focus the field that is not filled in yet or something). Was your goal to use Either way, do you think? |
|
I see. Kinda tired today, gonna see if I have some time to look at the source code tomorrow and come up with a proposition. I tried using a custom modal, but it restores focus to the last element, so it causes the same problem. Why do you switch tabs on focus? If I remember correctly the proper ways to implement tabs is to have them switch on left/right and mouse clicks, or have them switch on enter/space when the buttons are focusable. If following these guidelines, the button receiving focus, but the parent not updating the model value should not be an issue See here https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic This one works similarly to what you have implemented in the default mode, it works on left/right and clicks. You can, however, simulate a focus by clicking on the tab, the dragging your mouse outside of the button and release the click. This causes the button to receive focus, but it doesn't switch the open tab. Edit: just noticed that they actually use negative tabindex on the inactive buttons so you can't focus them, knew I should wait until tomorrow before replying Anyway, let me know what you were thinking about when designing the keyboard navigation and we'll see if we can figure something out. |
|
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 |
|
Yeah, this is how I ended up solving this. I'm still not sure why the tab tries to switch on focus |
The "change on focus" was an incorrect implementation detail that made it a bit easier but this causes a problem as seen in #1858. If you want to conditionally check if you want to change the tab or note (e.g. by using `window.confirm`) then the focus is lost while the popup is shown. Regardless of your choice, the browser will re-focus the Tab therefore asking you *again* what you want to do. This fixes that by only activating the tab if needed while using arrow keys or when you click the tab (not when it is focused).
* rework Tabs so that they don't change on focus The "change on focus" was an incorrect implementation detail that made it a bit easier but this causes a problem as seen in #1858. If you want to conditionally check if you want to change the tab or note (e.g. by using `window.confirm`) then the focus is lost while the popup is shown. Regardless of your choice, the browser will re-focus the Tab therefore asking you *again* what you want to do. This fixes that by only activating the tab if needed while using arrow keys or when you click the tab (not when it is focused). * update changelog
|
Hey! I reworked the internals of the This should be fixed by #1887, and will be available in the next release. You can already try it using:
|
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
TabPaneland 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
changeevent to conditionally determine whether or not the user should move to the new tab.The text was updated successfully, but these errors were encountered: