Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
kashitaka opened this issue Oct 7, 2024 · 1 comment
Assignees
Labels
question Further information is requested

Comments

@kashitaka
Copy link

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 kashitaka added the question Further information is requested label Oct 7, 2024
@kashitaka
Copy link
Author

kashitaka commented Oct 9, 2024

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,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants