If you set :modal="false" on a Drawer component that has other inputs such as a Select when you select an item it causes the drawer to close. It appears this happens with Select and Multiselect because the drop-downs are absolutely positioned like the drawer is and counts as a click outside the drawer. With the modal option set to true the mask shows and prevents this behavior. Setting :dismissable="false" is a bit of a workaround but isn't ideal and probably not the behavior expected by most users.
Describe the bug
If you set
:modal="false"on aDrawercomponent that has other inputs such as aSelectwhen you select an item it causes the drawer to close. It appears this happens withSelectandMultiselectbecause the drop-downs are absolutely positioned like the drawer is and counts as a click outside the drawer. With the modal option set to true the mask shows and prevents this behavior. Setting:dismissable="false"is a bit of a workaround but isn't ideal and probably not the behavior expected by most users.Reproducer
https://stackblitz.com/edit/rpmjt3?file=src%2FApp.vue
PrimeVue version
4.2.2
Vue version
4.x
Language
TypeScript
Build / Runtime
Vite
Browser(s)
No response
Steps to reproduce the behavior
In the StackBlitz—
Expected behavior
I expect until I click outside the drawer area for anything contained within the drawer to not cause it to close.