fix(inputs): display title attribute on root element (#12776)

fixes #11253 fixes #12775
vuetifyjs · Mar 6, 2021 · 17bd263 · 17bd263
1 parent 36efe16
commit 17bd263
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 4 deletions.
diff --git a/packages/vuetify/src/components/VCheckbox/VCheckbox.ts b/packages/vuetify/src/components/VCheckbox/VCheckbox.ts
@@ -81,6 +81,7 @@ export default Selectable.extend({
 
   methods: {
     genCheckbox () {
+      const { title, ...checkboxAttrs } = this.attrs$
       return this.$createElement('div', {
         staticClass: 'v-input--selection-controls__input',
       }, [
@@ -92,7 +93,7 @@ export default Selectable.extend({
           },
         }), this.computedIcon),
         this.genInput('checkbox', {
-          ...this.attrs$,
+          ...checkboxAttrs,
           'aria-checked': this.inputIndeterminate
             ? 'mixed'
             : this.isActive.toString(),

diff --git a/packages/vuetify/src/components/VInput/VInput.ts b/packages/vuetify/src/components/VInput/VInput.ts
@@ -154,6 +154,7 @@ export default baseMixins.extend<options>().extend({
     genControl () {
       return this.$createElement('div', {
         staticClass: 'v-input__control',
+        attrs: { title: this.attrs$.title },
       }, [
         this.genInputSlot(),
         this.genMessages(),

diff --git a/packages/vuetify/src/components/VRadioGroup/VRadio.ts b/packages/vuetify/src/components/VRadioGroup/VRadio.ts
@@ -140,6 +140,8 @@ export default baseMixins.extend<options>().extend({
       }, getSlot(this, 'label') || this.label)
     },
     genRadio () {
+      const { title, ...radioAttrs } = this.attrs$
+
       return this.$createElement('div', {
         staticClass: 'v-input--selection-controls__input',
       }, [
@@ -151,7 +153,7 @@ export default baseMixins.extend<options>().extend({
         this.genInput({
           name: this.computedName,
           value: this.value,
-          ...this.attrs$,
+          ...radioAttrs,
         }),
         this.genRipple(this.setTextColor(this.rippleState)),
       ])
@@ -179,6 +181,7 @@ export default baseMixins.extend<options>().extend({
       on: mergeListeners({
         click: this.onChange,
       }, this.listeners$),
+      attrs: { title: this.attrs$.title },
     }
 
     return h('div', data, [

diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.ts b/packages/vuetify/src/components/VSwitch/VSwitch.ts
@@ -77,12 +77,14 @@ export default Selectable.extend({
       ]
     },
     genSwitch (): VNode {
+      const { title, ...switchAttrs } = this.attrs$
+
       return this.$createElement('div', {
         staticClass: 'v-input--selection-controls__input',
       }, [
         this.genInput('checkbox', {
           ...this.attrs,
-          ...this.attrs$,
+          ...switchAttrs,
         }),
         this.genRipple(this.setTextColor(this.validationState, {
           directives: [{

diff --git a/packages/vuetify/src/components/VTextField/VTextField.sass b/packages/vuetify/src/components/VTextField/VTextField.sass
@@ -162,6 +162,7 @@
     &--active
       max-width: 133%
       transform: $text-field-label-active-transform
+      pointer-events: auto // Show title attr on label hover
 
   & > .v-input__control > .v-input__slot
     cursor: text

diff --git a/packages/vuetify/src/components/VTextField/VTextField.ts b/packages/vuetify/src/components/VTextField/VTextField.ts
@@ -378,14 +378,15 @@ export default baseMixins.extend<options>().extend({
     genInput () {
       const listeners = Object.assign({}, this.listeners$)
       delete listeners.change // Change should not be bound externally
+      const { title, ...inputAttrs } = this.attrs$
 
       return this.$createElement('input', {
         style: {},
         domProps: {
           value: (this.type === 'number' && Object.is(this.lazyValue, -0)) ? '-0' : this.lazyValue,
         },
         attrs: {
-          ...this.attrs$,
+          ...inputAttrs,
           autofocus: this.autofocus,
           disabled: this.isDisabled,
           id: this.computedId,