v-select activates when the cursor is the default arrow (not the pointer)

[stoked74]

Steps to reproduce

The default activation area for the v-select is really large and can have unwanted side effects on tight forms. Selects will activate when you click above the label and well below the input. Selects will also activate when the cursor is in it's default state (not the pointer).

This becomes an issue on tight forms where multiple selects are stacked vertically and 1 or more of them are multi-selects. It's can become difficult to find a clean area to click off on to get the select to close. You can use the escape key but most of the people that use my apps don't even realize that's possible.

I'm not sure if this is a bug, or by design, but it seems to me that the select should only trigger when the cursor has transitioned to the pointer. The area around the select when the cursor is in pointer mode is much smaller than the selects actual activation area.

Versions

Vue 2.4.2
Vuetify 14.8
Chrome 60 64bit on mac

What is expected ?

The select should only activate when the cursor has transitioned to the pointer.

What is actually happening ?

The activation area around a select is much larger than the area when the cursor is a pointer. The problem isn't the are around label, it's the amount of space that's clickable underneath the select. I personally don't think that anything underneath the bottom border of the input when clicked should trigger the select.

Reproduction Link

This occurs on every select on the docs site. I've attached a gif from my app for reference.

[sindrepm]

+1 for this one. Was just about to report it myself :)