Bug: scroll after closing the modal

[DarKsandr]

I'm using vue-final-modal (4.4.6) and vue3-tabs-component (last). After closing the modal, it scrolls up or down depending on where you are on the screen.

[Jacobs63]

Hello, the tabs don't have an ID attribute so such behaviour should not happen from the tabs component - could you post a minimum reproduction code to figure out the cause?

Thank you.

[DarKsandr]

@Jacobs63 I created a project that shows the problem. If you remove tabs from App.vue and leave only the elements, the scroll will not jump. Link: https://github.com/DarKsandr/vue-tabs-error There is a problem:

 <tabs>
            <tab name="First tab">
                <div v-for="item in items" @click="open">Open</div>
            </tab>
            <tab name="Second tab">
                Second tab content
            </tab>
        </tabs>

no problem:

<div v-for="item in items" @click="open">Open</div>

[Jacobs63]

Currently investigating - if trying the native dialog api I'm not encountering such issue, only if using the modal package with it.

Tried testing whether perhaps the first-tab-pane could be matched by the browser from the first-tab hash contained in URL, however that doesn't seem to be the case (as expected).

I'll continue investigating.

[DarKsandr]

@Jacobs63 I found out why the scroll is jumping. if you remove tabindex="-1" in Tab.vue, then the scroll stops jumping. Maybe it's worth removing tabindex when the tab is active?

[Jacobs63]

@Jacobs63 I found out why the scroll is jumping. if you remove tabindex="-1" in Tab.vue, then the scroll stops jumping. Maybe it's worth removing tabindex when the tab is active?

Hello, I've been testing this a bit during the weekend and currently believe this is caused by how the modal package is working with focus, likely caused by the useFocusTrap from VueUse, which it uses internally.. which uses focus-trap and jumps to previously focused element on trap deactivation.

I don't really see the reason to change tabindex dynamically here, it prevents it from being focusable, this would degrade usability for people with assistive technology.

This needs more thorough thinking & investigation, so I'll not accept the proposed solution at this time.

[Jacobs63]

Note, reading from focus-trap docs:

When the focus trap is deactivated, this is what should happen:

Focus is passed to whichever element had focus when the trap was activated (e.g. the button that opened the modal or menu).
Tabbing and clicking behave normally everywhere.

So this means, after closing the modal, the focus is given back to the original button, meaning it, possibly, might make the browser scroll the the center of the container the button is in.

[DarKsandr]

@Jacobs63 ok, until I solve the problem, I’ll rewrite the tabindex to an empty one in my project