search

HJ29 / vue3-tabs

A touch swipe tabs for vue 3
39 stars 7 forks source link

Focusable elements in tabs break tabs renderer during interactions #7

Open dzikoysk opened 2 years ago

dzikoysk commented 2 years ago

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

ezgif-5-eb3706019a

  1. Programmatically focused input also results in similar bug, etc.
HJ29 commented 2 years ago

Hi, you can try this vue3-tabs@v0.1.13-beta.3

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

dzikoysk commented 2 years ago

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)

ezgif-2-a346b313b8

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.