Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] Caret color is incorrect for solo-inverted text fields #9534

Closed
sindrepm opened this issue Nov 1, 2019 · 5 comments · Fixed by skyYaga/skdvin-webapp#21 or anyulled/reactivewebflux#5
Assignees
Labels
C: VTextField VTextField T: bug Functionality that does not work as intended/expected
Milestone

Comments

@sindrepm
Copy link
Contributor

sindrepm commented Nov 1, 2019

Environment

Vuetify Version: 2.1.9
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.120
OS: Windows 10

Steps to reproduce

Create a v-text-field component with solo-inverted prop.

Expected Behavior

I expect caret color to be the same as the text color.

Actual Behavior

In dark mode caret color is white which means it becomes invisible on the white background.
In light mode the caret color is the primary color which doesn't look too good either.

Reproduction Link

https://codepen.io/sindrepm/pen/WNNXmJb

Other comments

This can be fixed by setting the CSS caret-color to auto like this:

.v-text-field--solo-inverted.v-input--is-focused > .v-input__control>.v-input__slot input {
  caret-color: auto;
}
@ghost ghost added the S: triage label Nov 1, 2019
@dfabreguette

This comment has been minimized.

@nekosaur

This comment has been minimized.

@Agendum
Copy link

Agendum commented Jan 4, 2020

The fix mentioned doesn't work for v-autocomplete text fields. The bug can be reproduced simply by using the "select state" async example at the bottom of: https://vuetifyjs.com/en/components/autocompletes
How can I get this fixed for v-autocomplete?

@Agendum
Copy link

Agendum commented Jan 4, 2020

How can I get this fixed for v-autocomplete?

My situation is localized to a component so I just used this scoped style to work-around the problem:

>>> .v-input__slot input {
  caret-color: auto;
}

@jontybrook
Copy link

I'm also facing this issue. The solution above doesn't work for me because white--text overrides it with !important. Hope to see this fixed in a future release.

@johnleider johnleider added T: bug Functionality that does not work as intended/expected and removed S: triage labels Jan 9, 2020
@johnleider johnleider self-assigned this Jan 23, 2020
@johnleider johnleider added this to the v2.2.x milestone Jan 23, 2020
johnleider added a commit that referenced this issue Jan 23, 2020
now has the proper label/placeholder/caret colors when focused

fixes #9534
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VTextField VTextField T: bug Functionality that does not work as intended/expected
Projects
None yet
7 participants