[Bug Report][2.3.6] v-text-field outlined border colour incorrect with validation on iOS

Environment

Vuetify Version: 2.3.6 Vue Version: 2.6.11 Browsers: Safari OS: iOS

Steps to reproduce

Exceed the character limit for validation and the outline stays blue Reduce the number characters to be < character limit and outline goes red Pinch zoom in and out and the line flickers from blue to red and back

Expected Behavior

Outline to accurately reflect state of field

Actual Behavior

Outline doesn’t reflect state of field

Reproduction Link

https://codepen.io/andrewcowley/pen/XWXQPLQ

Other comments

Workaround:

 .v-text-field--outlined fieldset {
    border-color: currentColor !important
  }

[lacherogwu]

I found a workaround using MutationObeserve, that’s a quick fix until Vuetify will fix the issue on their side.

I set in the “mounted” lifecycle hook this function

const form = this.$refs.form.$el

const observer = new MutationObserver((mutationsList) => {
  mutationsList.forEach(({ type, target }) => {
    const fieldset = target.querySelector('fieldset')
    if(!fieldset) return
    fieldset.style = ''

    if(type === 'attributes' && target.classList.contains('v-input--has-state')){
      const activeClass = ['success', 'error'].filter(i => target.classList.contains(`${i}--text`))[0]
      activeClass === 'error' ? fieldset.style = 'border-color: #ff5252 !important;' : fieldset.style = 'border-color: #4caf50 !important;'
    }
  })
})

observer.observe(form, { attributes: true, subtree: true })

And this on the “style” block

.v-application div.v-text-field--outlined {
    color: transparent !important;
}
.v-text-field--outlined.v-input--is-focused fieldset, .v-text-field--outlined.v-input--has-state fieldset {
    border-color: #1976d2 !important;
}

Enjoy!

[lacherogwu]

The workaround also doesn’t work for me 😩