Focusable elements in tabs break tabs renderer during interactions

[dzikoysk]

There is several ways to force this behavior, in general any attempt to focus element from tab that is not currently fully displayed breaks the whole component.

Scenarios were we've experienced this:

1. When user will try to use tabulator to jump between focusable elements (forms, inputs, buttons, etc.) on 2 tabs

2. Programmatically focused input also results in similar bug, etc.

[HJ29]

Hi, you can try this [email protected]

it should solve this issue https://github.com/HJ29/vue3-tabs/issues/6 as well

[dzikoysk]

I can confirm that the 1. issue is fixed in 0.1.13-beta.3. Unfortunately, the programmatically requested focus for an input from 2. still breaks the tab component:

const focusInput = () =>
  document.getElementById('consoleInput').focus() // invoked during tab loading/animation (happens randomly tbh)

Results in: (I'm just reloading the page)

I could add some interval to focus this a little bit later, but it's always failing at some point - depends on hardware etc. and how long this animation takes time. Would be great if component could be just immune to this kind of interactions.