Why is input not working correctly in Google Chrome on Android (Vue.js app)?

Question

JavaScript

Greetings!

I am writing an application in Vue.js. It has an input, each time its value changes, the metro list should be filtered (in my opinion, a fairly standard situation).

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

Everything works fine on a computer (Chrome, Safari, Firefox), on iOS too (Safari, Chrome). The event is caught, the list is filtered. Problems only occur with Chrome on Android. Until the space bar is pressed or the focus is transferred, the input does not seem to receive the entered value. As far as I understood, it could be a feature of keyboard input in android (spell checking or something like that). I tried to add the attributes autocomplete, autocorrect, autocapitalize, spellcheck (I spied on Yandex) - nothing has changed. I also tried to catch the keydown / keyup event on the input - also to no avail.

Tell me, please, what can be done in this situation?

Answer 1

Don't use a keydown event, use a model watcher , or generally make the display list computed based on the model.
Actually, there is a direct example in the documentation for this: https://ru.vuejs.org/v2/examples/grid-component.html

Answer 2

Of the ready-made solutions, Bootsrap has it. For example code:

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Displays 45% of 100%
Read more here