Vuetify: [Bug Report] ClickOutside of a `v-menu` triggers another non-related `v-on:click`

[kuanyui]

Versions and Environment

Vuetify: 1.2.4
Vue: 2.5.17
Browsers: Firefox 62 & Chromium 69
OS: Chakra Linux

Steps to reproduce

  v-app
    v-content
      v-container
        .outside(@click='msg("outside")')  // [2] Then click here, the v-menu closed though, outside's @click also be trigger
          .STOP-EVENT(@click.stop="msg('v-btn to open a v-menu')")
            v-menu(@click.stop="msg('this did not work')")
              v-btn(slot="activator") .......  // [1] Click this, v-menu opened
              v-list ........

Expected Behavior

When a v-menu is opened, clicking outside of it should only close that v-menu only, without triggering any other v-on:click on the web page. (This is also the expected behavior of an Android application)

Actual Behavior

Clicking outside when a v-menu is opened, though the v-menu is closed successfully, but will also accidentally trigger unrelated click event listener.

Reproduction Link

This is a real world demo:
https://codepen.io/anon/pen/jemoPm?editors=1011

This is a minimalist demo:
https://codepen.io/anon/pen/WaOYEy?editors=1111

---

Additional Comments:

[KaelWD]

Duplicate of #1433, I don't think that should've been closed though.

[manueltaber]

Really need this feature, since in a form with a lot of buttons it's difficult to close the menu. On Android this is the default behaviour...

[zajca]

Since my issue was closed there is one big problem with vuetify select. When menu is open it's completely cover input field. It's cool but in UX manner not usable since it covers arrow which is intuitive way to close without selecting item. Best way to get out of this would be option to render menu under input not cover it.

Material design has great way to handle this. First menu is under input, second it has first value emtpy for unselect https://material-components.github.io/material-components-web-catalog/#/component/select

[KaelWD]

That also doesn't follow their own guidelines. You can use menu-props="offsetY" to prevent the overlap.

[KaelWD]

Had a shot at this a while ago, whoever tries next should explore an invisible overlay instead of hacking up click-outside.