search

vue-final / vue-final-modal

🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
https://vue-final-modal.org
MIT License
862 stars 95 forks source link

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

Closed Dodje closed 6 months ago

Dodje commented 6 months ago

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 6 months ago

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 6 months ago

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 6 months ago

@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