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

Elements inside the modal emits focusout with relatedTarget of the modal #455

Open kashitaka opened 1 month ago

kashitaka commented 1 month ago

I'm not sure whether it's bug or expected behavior, but when I focus out elements inside vue-final-modal, it emits a focusout event that has relatedTarget field set to the VFM element even I use it with focusTrap=false.

In my case, I tried to make a tooltip inside VFM, and I managed focusout event of the tooltip component to control its visibility: if foucusoutEvent.relatedTarget is the elements inside the tooltip, it keep open, and if not, it close. But the tooltip inside VFM always emits foucusoutEvent with relatedTarget that has the VFM element value even I click inside tooltip component.

According to mozilla's focusout event document, relatedTarget has the element receiving focus. I think this field should be null at least focusTrap is set to be false because there is no element in focus state.

Version

vue-final-modal: 4.5.5 vue: 3.4.15

OS

Mac

Reproduction Link

https://codesandbox.io/p/devbox/wkks49

Steps to reproduce

In the link above, focus on a input element in a tooltip inside the modal and focus out by clicking on the tooltip out of the input. It emits focusoutEvent with relatedTarget that set to be the modal element.

What is Expected?

Same as the tooltip out of the modal, it should emit focusoutEvent with relatedTarget: null.

kashitaka commented 4 weeks ago

I found this is caused by tabindex="0" in vfmContent Element.

https://github.com/vue-final/vue-final-modal/blob/master/packages/vue-final-modal/src/components/VueFinalModal/VueFinalModal.vue#L227

Since the root content element has tabindex="0", it becomes focusable. As a result, when I click any elements except focusable ones inside the modal, the root content element is being focused. I tried to remove tabindex field and I confirmed that this didn't happen.

This tabindex was -1 until end of v3 but changed to 0 since v4-beta. I want this to be back to -1 or make it controllable from out of the component by exposing it as a props. If anyone has any idea, please discuss it. Thanks,