vue-final/vue-final-modal

The Modal window with tabindex trigger blur event for elements with tabindex="-1"

Dodje opened this issue · 3 comments

Dodje commented

Version

vue-final-modal: 4.5.0
vue: 3.3.4
nuxt: 3.8

OS

Ubuntu

Steps to reproduce

  1. Install vue-select@^4.0.0-beta.6
  2. Install vue-final-modal@4.5.0
  3. Open modal window
  4. Click on select

What is Expected?

Open select list items on click while vue-final-modal is oppened

What is actually happening?

<div class="vfm__content vfm--outline-none _modal-content_1dgdf_8 vfm--prevent-auto" tabindex="0" style="">

While having tabindex in modal content a blur event is being triggered automaticly on select click.

Actually I thought It might be an issue with vue-select, but when I add tabindex to any others elements, everything works fine

Dodje commented

Actually our inner library input have the same behavior. After the click the blur event is being triggered automatically while the modal is opened

Dodje commented

I went through the sources and found some prop named focus-trap.
Seems like it's a nice option for full size windows with forms, etc
But we used the modal package including creating menu panels :)

Anyway, I'm gonna close the issue, and I hope it will be helpful for others too

Dodje commented

@hunterliu1003 Actually it seems like default props Default: () => ({ allowOutsideClick: true }) should allow click outside, but at the same time it triggers blur right after the focus in input