Skip to content

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

@kashitaka

Description

@kashitaka

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.

Metadata

Metadata

Assignees

Labels

questionFurther information is requested

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions