In my project, I have developed a unique component that functions as a combination of an input and select field. This allows users to input text into the field and select items from a dropdown menu based on their query.
The component works flawlessly on most devices I've tested it on. As the user types in the input field, the list of items updates dynamically to show only those items that contain the typed string.
However, I recently encountered a strange issue with the Chrome browser on my Android device. The list does not update as I type unless I press the "space bar." Has anyone experienced this before or have any insights into why this might be happening?
Below is the code snippet inside the <script setup> tag:
const props = defineProps([ 'items', 'searchBy' ])
const searchTerm = ref('')
const itemsToShow = computed(() => {
if (props.items) {
if (searchTerm.value) {
return props.items.filter(el => {
if (props.searchBy) {
return el[props.searchBy].toUpperCase().indexOf(searchTerm.value.toUpperCase()) > -1
}
return el.toUpperCase().indexOf(searchTerm.value.toUpperCase()) > -1
})
} else {
return props.items
}
} else {
return []
}
})
Here is the corresponding HTML code:
<input
type="text"
class="input"
v-model="searchTerm"
placeholder=" "
/>
<div class="items-list">
<div
v-for="item in itemsToShow"
:key="item"
@click="() => handleAdd(item)"
class="item text"
>
{{ item }}
</div>
<div
v-if="!itemsToShow.length"
class="text"
>
No items match searched term
</div>
</div>
UPDATE:
After some investigation, it appears that the binding between the searchTerm reference and the input field is not updating properly even though I used v-model. I am still puzzled by this behavior and not sure what could be causing it.