dsi-commander/resources/js/Components/SearchableSelect.vue

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';

const props = defineProps({
    modelValue: {
        type: [String, Number, null],
        default: ''
    },
    options: {
        type: Array,
        default: () => []
    },
    placeholder: {
        type: String,
        default: 'Rechercher...'
    }
});

const emit = defineEmits(['update:modelValue']);

const isOpen = ref(false);
const searchQuery = ref('');
const selectContainer = ref(null);

// Initialize searchQuery based on modelValue
watch(() => props.modelValue, (newVal) => {
    const opt = props.options.find(o => o.value === newVal);
    if (opt && !isOpen.value) {
        searchQuery.value = opt.label;
    } else if (!newVal) {
        searchQuery.value = '';
    }
}, { immediate: true });

const filteredOptions = computed(() => {
    if (!searchQuery.value) return props.options;
    const lowerQuery = searchQuery.value.toLowerCase();
    return props.options.filter(opt => 
        opt.label.toLowerCase().includes(lowerQuery)
    );
});

function selectOption(option) {
    if (!option) {
        emit('update:modelValue', '');
        searchQuery.value = '';
    } else {
        emit('update:modelValue', option.value);
        searchQuery.value = option.label;
    }
    isOpen.value = false;
}

function onClickOutside(event) {
    if (selectContainer.value && !selectContainer.value.contains(event.target)) {
        isOpen.value = false;
        // Revert searchQuery to selected item if clicked outside without selecting
        if (props.modelValue) {
            const opt = props.options.find(o => o.value === props.modelValue);
            searchQuery.value = opt ? opt.label : '';
        } else {
            searchQuery.value = '';
        }
    }
}

// Ensure the dropdown handles tab and escape properly
function onKeyDown(event) {
    if (event.key === 'Escape') {
        isOpen.value = false;
    }
}

onMounted(() => {
    document.addEventListener('click', onClickOutside);
});

onBeforeUnmount(() => {
    document.removeEventListener('click', onClickOutside);
});
</script>

<template>
    <div class="relative" ref="selectContainer" @keydown="onKeyDown">
        <!-- Input field -->
        <input 
            type="text"
            v-model="searchQuery"
            @focus="isOpen = true; searchQuery = ''"
            :placeholder="placeholder"
            class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm pr-10"
        />
        
        <!-- Clear button / Toggle indicator -->
        <div class="absolute inset-y-0 right-0 flex items-center pr-2">
            <button v-if="modelValue" type="button" @click.stop="selectOption(null)" class="text-gray-400 hover:text-gray-600 focus:outline-none p-1 z-10" title="Effacer la sélection">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
            <svg v-else class="h-5 w-5 text-gray-400 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd" />
            </svg>
        </div>

        <!-- Dropdown -->
        <transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
            <div v-show="isOpen" class="absolute z-20 mt-1 w-full rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none max-h-60 overflow-y-auto">
                <ul tabindex="-1" role="listbox" aria-labelledby="listbox-label">
                    <!-- If no results -->
                    <li v-if="filteredOptions.length === 0" class="text-gray-500 cursor-default select-none relative py-2 pl-3 pr-9 text-sm">
                        Aucun résultat trouvé.
                    </li>
                    
                    <!-- Options -->
                    <li 
                        v-for="option in filteredOptions" 
                        :key="option.value"
                        @click.stop="selectOption(option)"
                        class="text-gray-900 hover:bg-indigo-600 hover:text-white cursor-pointer select-none relative py-2 pl-3 pr-9 text-sm transition-colors"
                    >
                        <span class="block truncate" :class="{ 'font-semibold': option.value === modelValue, 'font-normal': option.value !== modelValue }">
                            {{ option.label }}
                        </span>
                        <span v-if="option.value === modelValue" class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600">
                            <!-- Adjusted hover states internally since parent hover handles it -->
                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                            </svg>
                        </span>
                    </li>
                </ul>
            </div>
        </transition>
    </div>
</template>