feat(VTextField): only show placeholder on focus if label is set (#12635

)

resolves #12499

Having both label and placeholder displayed can be a usability problem
as the placeholder looks very similar to typed text and could be
confused with user input at a glance

packages/vuetify/src/components/VTextField/VTextField.ts

@@ -187,11 +187,10 @@ export default baseMixins.extend<options>().extend({
       }
     },
     showLabel (): boolean {
-      return this.hasLabel && (!this.isSingle || (!this.isLabelActive && !this.placeholder))
+      return this.hasLabel && !(this.isSingle && this.labelValue)
     },
     labelValue (): boolean {
-      return !this.isSingle &&
-        Boolean(this.isFocused || this.isLabelActive || this.placeholder)
+      return this.isFocused || this.isLabelActive
     },
   },
 
@@ -388,7 +387,7 @@ export default baseMixins.extend<options>().extend({
           autofocus: this.autofocus,
           disabled: this.isDisabled,
           id: this.computedId,
-          placeholder: this.placeholder,
+          placeholder: this.isFocused || !this.hasLabel ? this.placeholder : undefined,
           readonly: this.isReadonly,
           type: this.type,
         },