Problem: I created a custom component that works as a searchable selection which via vue’s dom event handlers (@input, @focus, watch) detects client input and performs the search on the server.
My component works perfectly (maybe it could be perfected) on all devices except my phone (Xiamo Redmi 12) in which I use a custom keyboard for convenience. i thought that was the problem instead not.
Trying to detect the input with a vanilla javascript eventListener works while with vue handlers, the input is detected only when I ‘unselect’ the input.
<template>
<div ref="inputContainer" class="input-select-container" >
<label v-if="label">{{ label }}</label>
<input
v-model="model"
:type
id="search-input"
:placeholder
:required="required"
@focus="handleShowList"
@input="handleShowList"
autocomplete="off"
:class="class"
/>
<div class="input-select-list" v-if="insideList">
<ul v-if="showList" ref="selectList">
<slot></slot>
</ul>
</div>
</div>
</template>
<script setup>
import { ref, onUnmounted, onMounted, watch } from 'vue';
const model = defineModel();
const emits = defineEmits(['show-list']);
const props = defineProps({
type: {
type: String,
default: 'search'
},
id: {
type: String,
default: 'input'
},
label: {
type: String,
default: null
},
placeholder: {
type: String,
default: ''
},
required: {
type: Boolean,
default: false
},
class: {
type: String,
default: ''
},
insideList: {
type: Boolean,
default: true
}
});
const showList = ref(false);
const inputContainer = ref(null);
const selectList = ref(null);
function handleClickOutside(event) {
if (inputContainer.value && !inputContainer.value.contains(event.target)) {
handleHideList();
}
}
function handleShowList(){
showList.value = true;
}
function handleHideList(){
showList.value = false;
}
//not work
watch(showList, (value) => {
emits('show-list', value);
});
//not work
watch(model, (newValue, oldValue) => {
console.log('Input value changed:', newValue); // Log per debug
showList.value = true; // Mostra la lista ogni volta che l'input cambia
});
onMounted(() => {
document.addEventListener('click', handleClickOutside);
//WORK
document.getElementById('search-input').addEventListener('input', function(){
console.log('Input value changed:', this.value);
});
});
onUnmounted(() => {
document.removeEventListener('click', handleClickOutside);
});
defineExpose({
handleHideList
});
</script>