[Bug Report] Title attribute not showing on label hover, and in some components at all #12775
Assignees
Milestone
Comments
ghost
added
the
scscgit
added a commit
to scscgit/vuetify
that referenced
this issue
Dec 12, 2020
…2775) Display hover effect of title attr even on label of v-text-field, which may have moved outside (above) the input when not outlined, by enabling pointer-events only when it's active (not otherwise). Fix another v-switch bug of ripple effect's event blocking hover. Fix displaying title at all in v-radio. (Also fixed ripple here.) Move title attr to a parent object, making it trigger even on the threshold of input boundaries, increasing its accessibility scope to avoid blind zones. Remove the duplicate title in v-text-field, v-radio, v-switch, and v-checkbox after moving to parent element; specifically VInput, or in the v-radio's case via its own parent. Modified VInput's genInputSlot(): it's being called by components VAutocomplete, VRadioGroup, VSelect, and VTextField (maybe more). This also fixed v-select's issue of title not appearing (vuetifyjs#11253).
8 tasks
|
workaround: title on label can be also added if you use the |
scscgit
added a commit
to scscgit/vuetify
that referenced
this issue
Jan 6, 2021
…2775) Display hover effect of title attr even on label of v-text-field, which may have moved outside (above) the input when not outlined, by enabling pointer-events only when it's active (not otherwise). Fix another v-switch bug of ripple effect's event blocking hover. Fix displaying title at all in v-radio. (Also fixed ripple here.) Move title attr to a parent object, making it trigger even on the threshold of input boundaries, increasing its accessibility scope to avoid blind zones. Remove the duplicate title in v-text-field, v-radio, v-switch, and v-checkbox after moving to parent element; specifically VInput, or in the v-radio's case via its own parent. Modified VInput's genInputSlot(): it's being called by components VAutocomplete, VRadioGroup, VSelect, and VTextField (maybe more). This also fixed v-select's issue of title not appearing (vuetifyjs#11253).
scscgit
added a commit
to scscgit/vuetify
that referenced
this issue
Jan 6, 2021
) Display hover effect of title attr even on label of v-text-field, which may have moved outside (above) the input when not outlined, by enabling pointer-events only when it's active (not otherwise). Fix another v-switch bug of ripple effect's event blocking hover. Fix displaying title at all in v-radio. (Also fixed ripple here.) Move title attr to a parent object, making it trigger even on the threshold of input boundaries, increasing its accessibility scope to avoid blind zones. Remove the duplicate title in v-text-field, v-radio, v-switch, and v-checkbox after moving to parent element; specifically VInput, or in the v-radio's case via its own parent. Modified VInput's genInputSlot(): it's being called by components VAutocomplete, VRadioGroup, VSelect, and VTextField (maybe more). This also fixed v-select's issue of title not appearing (vuetifyjs#11253).
scscgit
added a commit
to scscgit/vuetify
that referenced
this issue
Jan 6, 2021
Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com>
scscgit
added a commit
to scscgit/vuetify
that referenced
this issue
Jan 6, 2021
) The `pointer-events: none` workaround had caused a new issue of ripple not disappearing on mouseout event and has been removed. As we've moved the title attribute to a parent v-input, it's no longer necessary to disable the ripple's hover effect override, because ripple now properly inherits the title. We'd still need some new workaround if we had to explicitly put title on input.
8 tasks
johnleider
added
C: VInput
KaelWD
pushed a commit
that referenced
this issue
Mar 6, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Environment
Vuetify Version: 2.3.21
Vue Version: 2.6.11
Browsers: Firefox 83.0
OS: Windows 10
Steps to reproduce
Try hovering on components like [
v-text-field,v-textarea,v-switch,v-checkbox,v-radio,v-select,v-combobox,v-autocomplete] with [titleandlabel] props, and watch if the title tooltip appears. It doesn't work in these places:Expected Behavior
titleonv-text-fieldwith alabel, I assume the most logical use-case is for the user to be able to intuitively hover on the label (gaining accessibility), considering that Vuetify makes the ending disappear when there isn't enough space (white I'd personally also vote to allow overriding, as we may prefer to use vertical space to display all of it); but also in the scenarios when we want a custom title.Actual Behavior
v-text-field'slabelsupport hover (once it moves away from the input), it actually moves position outside the element. When outlined prop is used, it stays within the element, however the hover doesn't trigger on those "boundaries" either.v-switchandv-radio, in total a combination of about three issues: not displaying at all, not displaying for all elements under parent, and being blocked by a ripple element.v-selectat all, and has issues in several other related components.Reproduction Link
https://codepen.io/cTAlENtATI/pen/KKgagzB
Other comments
Don't worry, I've already fixed this and sent a PR #12776 to dev branch, so please help me test the stability.
There's a related issue for v-select: #11253 where the
pointer-events: noneimplementation was described as a workaround to achieve expected behavior. In my implementation I enabledpointer-events: autoon active label, but there may be a better solution; I was unsuccessful in trying to use something like& :not(&--active)or& :not(.v-label--active)withpointer-events: noneinstead, intending to avoid settingautoas an override in case the developer explicitly changes it in a parent component, so you may also reconsider this.The text was updated successfully, but these errors were encountered: