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
931 stars 99 forks source link

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

Closed Dodje closed 11 months ago

Dodje commented 11 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 11 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 11 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 11 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