Vuetify: [Bug Report] v-select label outlined: fieldset border crosses over the label

[pcalin]

Environment

Vuetify Version: 2.1.1
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.90, Safari, Google Chrome, Microsoft Edge
OS: Windows 10, Windows, Android, iOS, Mac OSX

Steps to reproduce

simply expand the expansion panel and observe the label being crossed through.

Expected Behavior

border should stop next to label

Actual Behavior

border crosses over label

Reproduction Link

https://codepen.io/calin-pirtea/pen/MWWgXQB?&editable=true&editors=101#anon-signup

Other comments

I have not seen this work in vuetify 2.0+

the expansion is not required to get the broken behaviour but it is the easiest way to reproduce.

I was able to get the broken behaviour even using examples from https://vuetifyjs.com/en/components/selects#examples

[pcalin]

After logging it I found another example of the same thing in https://github.com/vuetifyjs/vuetify/issues/9165

[ascott18]

This happens for any input component that supports outlined - v-text-field, v-select, and so on.

It also happens when these inputs are used as the activator slot for a v-menu or v-dialog. For example, add outlined to the v-text-fields in the date picker menu/dialog examples at https://vuetifyjs.com/en/components/date-pickers#date-pickers-in-dialog-and-menu

[willemavjc]

For my personal knowledge, does anyone already know where this issue happens? I mean, is this caused by an erroneous JS code from Vuetify in charge of standard HTML/CSS/JS conversion and called on serve/build-time?

[willemavjc]

Interestingly, I found out while playing on codepen and changing labels and/or placeholders values that _sometimes_ label's width is correctly computed when default expansion's showproperty is true.
So weird.

[jcirizar]

Anyone knows a fix for this so far?

[MrJmpl3]

I see, the problem is in the style width from the legend tag.

[Dev1lDragon]

Intersection Observer can solve the proplem

[waynecz]

Me too, when the component is firstly invisibleeg. display: none, the lagend width would get 0

[Dev1lDragon]

Google have good solution for that and corrections is easy, consist in label background color.
Example above is shown how its can be corrected for light and dark theme

[N3rdP1um23]

I am seeming to have the same issue with having a v-select in a v-expansion-panel. @MajesticPotatoe linked me to this issue and I thought I'd add a note. I linked it in the Discord but here's an example of the issue

[demonye]

Google have good solution for that and corrections is easy, consist in label background color.
Example above is shown how its can be corrected for light and dark theme

This fixed border crossing over but if there is prepend-inner-icon on the text-field, the label position is still not right.

[jacekkarczmarczyk]

Duplicate of https://github.com/vuetifyjs/vuetify/issues/9165