fix(VTextField, VTextarea): keep input visible for password managers

fixes #21912
closes #20343

Author: J-Sek

packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.browser.tsx

@@ -463,17 +463,20 @@ describe('VAutocomplete', () => {
     expect(input).toHaveAttribute('placeholder', 'Placeholder')
 
     await rerender({ label: 'Label' })
-    await expect.element(input).not.toBeDisplayed()
+    await expect.element(input).toBeDisplayed()
+    expect(Number(window.getComputedStyle(input, '::placeholder').opacity)).toBe(0)
 
     input.focus()
     await waitAnimationFrame()
     expect(input).toHaveAttribute('placeholder', 'Placeholder')
     await expect.element(input).toBeDisplayed()
+    expect(Number(window.getComputedStyle(input, '::placeholder').opacity)).toBeGreaterThan(0.2)
 
     input.blur()
     await rerender({ persistentPlaceholder: true })
     expect(input).toHaveAttribute('placeholder', 'Placeholder')
     await expect.element(input).toBeDisplayed()
+    expect(Number(window.getComputedStyle(input, '::placeholder').opacity)).toBeGreaterThan(0.2)
 
     await rerender({ modelValue: 'Foobar' })
     expect(input).not.toHaveAttribute('placeholder')

packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.browser.tsx

@@ -493,16 +493,19 @@ describe('VCombobox', () => {
     await expect.element(input).toHaveAttribute('placeholder', 'Placeholder')
 
     await rerender({ label: 'Label' })
-    await expect.element(input).not.toBeDisplayed()
+    await expect.element(input).toBeDisplayed()
+    expect(Number(window.getComputedStyle(input, '::placeholder').opacity)).toBe(0)
 
     await userEvent.click(input)
     await expect.element(input).toHaveAttribute('placeholder', 'Placeholder')
     await expect.element(input).toBeDisplayed()
+    expect(Number(window.getComputedStyle(input, '::placeholder').opacity)).toBeGreaterThan(0.2)
 
     await userEvent.tab()
     await rerender({ persistentPlaceholder: true })
     await expect.element(input).toHaveAttribute('placeholder', 'Placeholder')
     await expect.element(input).toBeDisplayed()
+    expect(Number(window.getComputedStyle(input, '::placeholder').opacity)).toBeGreaterThan(0.2)
 
     await rerender({ modelValue: 'Foobar' })
     await expect.element(input).not.toHaveAttribute('placeholder')

packages/vuetify/src/components/VTextField/VTextField.sass

@@ -8,7 +8,6 @@
   .v-text-field
     input
       color: inherit
-      opacity: 0
       flex: $text-field-input-flex
       transition: $text-field-input-transition
       min-width: 0
@@ -40,16 +39,15 @@
           @at-root #{selector.append('.v-text-field--suffixed', &)}
             --v-field-padding-start: #{$text-field-input-padding-end}
 
+      &:not(.v-field--no-label, .v-field--active)
+        input::placeholder
+          opacity: 0
+
     .v-input__details
       padding-inline: $text-field-details-padding-inline
       @at-root #{selector.append('.v-input--plain-underlined', &)}
         padding-inline: 0
 
-    .v-field--no-label,
-    .v-field--active
-      input
-        opacity: 1
-
     .v-field--single-line
       input
         transition: none

packages/vuetify/src/components/VTextarea/VTextarea.sass

@@ -11,6 +11,10 @@
     .v-field
       --v-textarea-control-height: var(--v-input-control-height)
 
+      &:not(.v-field--no-label, .v-field--active)
+        input::placeholder
+          opacity: 0
+
     .v-field__field
       --v-input-control-height: var(--v-textarea-control-height)
 
@@ -40,13 +44,7 @@
       .v-field__input
         resize: none
 
-    .v-field--no-label,
-    .v-field--active
-      textarea
-        opacity: 1
-
     textarea
-      opacity: 0
       flex: 1
       min-width: 0
       height: 100%