Vuetify: [Bug Report] Autocomplete custom slot item filter highlight entire text when not found

Created on 15 Mar 2020  路  1Comment  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.2.11
Vue Version: 2.6.11
Browsers: Chrome 80.0.3987.106
OS: Linux x86_64

Steps to reproduce

search for "jika" . the description is well highlighted, but the entire name which is not containing the searched text is also highlighted.

Expected Behavior

only highlight the searched text for other text element.

Actual Behavior

i did a workaround, i think this line make it highlights every middle text wether text was found or not.

modifying methods getMaskedCharacters & genFilteredText like:

    genFilteredText (text: string) {
      ...

      const { start, middle, end, found } = this.getMaskedCharacters(text)

      if (found) {
         return `${escapeHTML(start)}${this.genHighlight(middle)}${escapeHTML(end)}`
      } else {
         return `${escapeHTML(start)}${escapeHTML(middle)}${escapeHTML(end)}`
      }

    },
    getMaskedCharacters (text: string): {
      ...

      if (index < 0) return { start: '', middle: text, end: '', found: false }
      ...
      return { start, middle, end, found: true }
    },

Reproduction Link

https://codepen.io/asule90/pen/RwPybqO

VSelect bug pending review

Most helpful comment

Or just return { start: text, middle: '', end: '' } unless there's some situation we need to highlight the whole lot.

>All comments

Or just return { start: text, middle: '', end: '' } unless there's some situation we need to highlight the whole lot.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

smousa picture smousa  路  3Comments

milleraa picture milleraa  路  3Comments

radicaled picture radicaled  路  3Comments

cawa-93 picture cawa-93  路  3Comments

gluons picture gluons  路  3Comments