[Bug Report] vMenu dropdown doesn't alwasy correctly close when having multiple apps in one page

[nickgr6]

Versions and Environment

Vuetify: 1.1.0-beta.0
Vue: 2.5.16
Browsers: Chrome 66.0.3359.181
OS: Linux x86_64

Steps to reproduce

Click on dropdown #1

Then click on lower half of the screen.
Expecting that dropdown #1 closes, but does not.
When clicking upper half of the screen the dropdown does close.

Expected Behavior

Expecting that dropdown #1 closes even if clicking outside of the current 'app scope'
Same goes for dropdown #2.

Actual Behavior

Expecting that dropdown #1 closes, but does not, only when clicking in scope of the first 'app' on the page with multiple apps.

Reproduction Link

https://codepen.io/anon/pen/NzKajM

[nekosaur]

There is no official support for having multiple v-app elements

[KaelWD]

Safari doesn't support click bubbling on the body element, so everything must be within a v-app. If that isn't possible then you should add the data-app attribute to some other wrapping element.

[nickgr6]

Thank you for the fast replies!

Unfortunately I really need the 'multiple v-app' approach because unfortunately we'll have script tags in the body and simply don't want one major vueJS app. We are creating a modular CMS which consists of parts in separate git repo's / projects so we don't use webpack/vue-cli to create one big app bundle.

Unfortunately the data-app approach doesn't entirey work, because then I have to place it outside of the v-app's and the styling of the second dropdown is not correct (missing v-app relating styling or something..)

TLDR:
For now I have a workaround and hope that we don't encounter more surprises due to our multiple app structure;). I simply trigger a click on all active activators and that closes them.

https://codepen.io/nickgr6/pen/VdZdmj

[alawson107]

@nickgr6 Excellent solution, thanks!