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
862 stars 95 forks source link

Input not working inside Vue Final Modal & VDropdown #406

Closed mateusz-wyka closed 7 months ago

mateusz-wyka commented 7 months ago

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 7 months ago

@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 7 months ago

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