A unique issue has arisen with an input field that filters a list whenever a key is pressed, displaying the filtered results in the browser. While the functionality works perfectly on desktop, it behaves strangely on Android mobiles. The list only shows up after hitting the space or enter key. Even more peculiar is the fact that once space or "enter" is pressed on the Android keyboard, the list filters and displays correctly as you type. I have attempted using @keydown, @keyup, and @keypress events, but haven't achieved the desired behavior yet.
The Input Field with v-model
<input
v-model="searchValue"
type="text"
@input="filterStories"
/>
Filter Function and Data Properties
data() {
return {
searchValue: '',
filteredStories: []
}
},
methods: {
filterStories() {
if (this.stories.length) {
let filtered = this.stories.filter(
(story) =>
story.name.toLowerCase().includes(this.searchValue.toLowerCase())
)
if (!this.searchValue) {
this.filteredStories = []
} else {
this.filteredStories = filtered
}
}
}
Output list in browser
<li
v-for="(story, i) in filteredStories"
v-else-if="
stories.length && filteredStories.length && searchValue
"
:key="i"
>
<NuxtLink
:to="'/' + story.full_slug"
>
{{ story.name }}
</NuxtLink>
</li>
This detailed explanation should provide enough insight into the issue at hand. Thank you for looking into it!