Modal can't be used inside fixed position containers such as dropdowns
I'm trying to use the new modal in a new feature of setting your status from the current user dropdown, but I'm running into an issue when the modal trigger has to be a dropdown menu item.
In layouts/header/current_user_dropdown, if I add a Vue-mountable element, the modal will appear in said element. This works as it should but renders incorrectly since the dropdown itself is a fixed element, so the modal appears in the dropdown like so:
There looks to be an existing issue on the Bootstrap-Vue repo that's classified as "won't fix": https://github.com/bootstrap-vue/bootstrap-vue/issues/1108
That said, I'm unsure how to proceed using the new modal unless I wrap the entire header/_default.html.haml file into a Vue component, as the bv::show::modal event will only fire on $root on where the component was mounted. I'll probably have to use the deprecated modal, then?
The only existing implementation of gl-ui-modal works since the modal trigger is in the main content area, which is not fixed positioned.
