Почему на Android в Google Chrome некорректно работает input (приложение на Vue.js)?

Question

[andrewgul]

Приветствую!

Пишу приложение на Vue.js. В нем есть input, при каждом изменении его значения должна производится фильтрация списка метро (на мой взгляд довольно стандартная ситуация).

<input
    type="text" 
    class="select-input" 
    v-model="searchInput"
    @keydown="searchMetro"
    placeholder="Поиск"
    autocomplete="off"
    autocorrect="off"
    autocapitalize="off"
    spellcheck="false"
    aria-autocomplete="none"
>

На компе все работает нормально (Chrome, Safari, Firefox), на iOS тоже (Safari, Chrome). Событие отлавливается, список фильтруется. Проблемы возникают только с Chrome на Android. Пока не будет нажат пробел либо не будет переведен фокус, инпут как будто не получает введенное значение. Насколько я понял, это может быть особенность ввода с клавиатуры в андроиде (проверка орфографии или что-то в этом роде). Пробовал добавить атрибуты autocomplete, autocorrect, autocapitalize, spellcheck (подсмотрел у Яндекса) – ничего не поменялось. Так же пробовал отлавливать событие keydown/keyup на инпуте – тоже толку ноль.

Подскажите, пожалуйста, что в данной ситуации можно сделать?

Comments

[sinneren]

а если @keydown.native ?

ну и в интернетах пишут менять v-model на :value="text" @input="text = $event.target.value"
https://vuejs.org/v2/guide/forms.html#vmodel-ime-tip

[Alex]

Сделайте демо в песочнице

[andrewgul]

sinneren, да, похожее решение помогло, спасибо! Если обрабаывать значение инпута на ванильном js а не средствами Vue, то проблем не возникает.

<input 
    type="text" 
    class="select-input" 
    id="metroSearchInputEl"
    placeholder="Поиск"
    autocomplete="off"
    autocorrect="off"
    autocapitalize="off"
    spellcheck="false"
    aria-autocomplete="none"
>

И в mounted() вызывать этот метод.

watchMetroSearchInputVal() {
    const inputEl = document.getElementById('metroSearchInputEl')

    inputEl.addEventListener('input', () => {
        this.searchInput = inputEl.value

       // Метод берущий значение из this.searchInput и обновляющий список в зависимости от значения 
        this.searchMetro()
    })
}

[sinneren]

andrewgul, ну... я думаю без этого костыля можно с @change запилить еще

Answer 1

[Антон Антон]

Не используй событие keydown, используй наблюдателя за моделью или вообще сделай отображаемый список вычисляемым на основе модели.
Собственно, есть прям пример в документации под это: https://ru.vuejs.org/v2/examples/grid-component.html

Answer 2

[AnastasiiaI3]

<input
  :value="searchInput"
  @input='handleInputChange'
/>

handleInputChange (evt) {
   this.searchInput= evt.target.value
   // остальная логика
  }

Это решение сработало для меня)