vue-final/vue-final-modal

Input not working inside Vue Final Modal & VDropdown

mateusz-wyka opened this issue · 2 comments

mateusz-wyka commented

Hi

Version

nuxt: 3.8.2,
floating-vue: 2.0.0-beta.24,
vue-final-modal: 4.4.6,

OS

Mac

Reproduction Link

Codesandbox

Steps to reproduce

Try to write something in inputs which are in modal and VDropdown.

What is Expected?

Input in VDropdown that is in the modal should work.

What is actually happening?

Input that is in VDropdown that is in the modal doesn't work.

hunterliu1003 commented

@mateusz-wyka
It's because the floating-vue put the popup element outside of the modal element, this make the focusTrap not working anymore. Set :focusTrap="false" can temporarily fix issue, but you will also lose the focusTrap. I don't think I can handle this issue in vue-final-modal, I prefer to open an issue to floating-vue and see if there is a way to not append popup element to <body>.

mateusz-wyka commented

@hunterliu1003 I dont need focusTrap so this is a good solution for me. Thanks!

  • 👍1