Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(VTextField): apply different color logic for solo-inverted fields
fixes #8827
  • Loading branch information
johnleider committed Feb 1, 2020
1 parent d99bff7 commit afa2647
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 0 deletions.
8 changes: 8 additions & 0 deletions packages/vuetify/src/components/VTextField/VTextField.ts
Expand Up @@ -11,6 +11,7 @@ import VLabel from '../VLabel'
// Mixins
import Intersectable from '../../mixins/intersectable'
import Loadable from '../../mixins/loadable'
import Validatable from '../../mixins/validatable'

// Directives
import ripple from '../../directives/ripple'
Expand Down Expand Up @@ -117,6 +118,13 @@ export default baseMixins.extend<options>().extend({
'v-text-field--shaped': this.shaped,
}
},
computedColor (): string | undefined {
const computedColor = Validatable.options.computed.computedColor.call(this)

if (!this.soloInverted || !this.isFocused) return computedColor

return this.color || 'primary'
},
computedCounterValue (): number {
if (typeof this.counterValue === 'function') {
return this.counterValue(this.internalValue)
Expand Down
Expand Up @@ -835,4 +835,24 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
wrapper.vm.onObserve([], [], true)
expect(document.activeElement === element).toBe(false)
})

it('should use the correct icon color when using the solo inverted prop', () => {
const wrapper = mountFunction({
propsData: { soloInverted: true },
mocks: {
$vuetify: {
theme: { dark: false },
},
},
provide: {
theme: { isDark: true },
},
})

expect(wrapper.vm.computedColor).toBe('white')

wrapper.vm.focus()

expect(wrapper.vm.computedColor).toBe('primary')
})
})

0 comments on commit afa2647

Please sign in to comment.