fix(input) : InputAutocomplete garde la valeur collée après sélection (MUI-48)

Après avoir sélectionné une suggestion dans la liste, un collage qui
remplace tout (Ctrl+A puis Ctrl+V, sans re-cliquer dans le champ) vidait
le champ au lieu de prendre la valeur collée.

Cause : onSelect repassait isFocused à false alors que l'input gardait le
focus DOM (option cliquée en mousedown.prevent). Au collage, onInput émet
update:modelValue(null) et le watch de synchronisation, protégé par le seul
isFocused, remettait inputValue à ''. onInput resynchronise désormais
isFocused (un évènement input prouve l'édition).

- test de non-régression colocalisé (séquence sélection → Ctrl+A/Ctrl+V)
- page playground : section allowCreate + BAN dédiée au test
- CHANGELOG : entrée Fixed MUI-48

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-25 10:37:17 +02:00
parent 37434fbfc6
commit b09a96cc53
4 changed files with 104 additions and 1 deletions
@@ -47,6 +47,31 @@
</p>
</div>
<div class="rounded-lg border-2 border-m-primary p-4 md:col-span-2">
<h2 class="mb-1 text-xl font-bold">allowCreate + BAN (test MUI-48)</h2>
<p class="mb-3 text-sm text-m-muted">
Tapez au moins 3 caractères → suggestions de la Base Adresse Nationale.
<strong>Repro :</strong> sélectionnez une adresse dans la liste, puis
<kbd>Ctrl</kbd>+<kbd>A</kbd> et <kbd>Ctrl</kbd>+<kbd>V</kbd> pour coller une autre valeur
par-dessus. La valeur collée doit rester (le champ ne doit ni se vider, ni faire redescendre le label).
</p>
<MalioInputAutocomplete
v-model="banValue"
label="Adresse"
:options="banOptions"
:loading="banLoading"
:min-search-length="3"
allow-create
icon-name="mdi:map-marker-outline"
icon-position="left"
@search="onSearchBan"
@create="onCreateBan"
/>
<p class="mt-2 text-sm text-m-muted">
v-model : <code>{{ banValue ?? 'null' }}</code>
</p>
</div>
<div class="rounded-lg border p-4">
<h2 class="mb-4 text-xl font-bold">Avec création (allowCreate)</h2>
<MalioInputAutocomplete
@@ -199,4 +224,40 @@ const onSearchApi = async (query: string) => {
const onSelectApi = (option: Option | null) => {
apiSelected.value = option
}
// allowCreate + BAN (test MUI-48) : recherche nationale sur la Base Adresse Nationale.
const banValue = ref<string | number | null>(null)
const banOptions = ref<Option[]>([])
const banLoading = ref(false)
let banFetchId = 0
const onSearchBan = async (query: string) => {
if (query.length < 3) {
banOptions.value = []
banLoading.value = false
return
}
const requestId = ++banFetchId
banLoading.value = true
try {
const params = new URLSearchParams({q: query, limit: '8'})
const response = await fetch(`https://api-adresse.data.gouv.fr/search/?${params.toString()}`)
const data = await response.json() as {features: {properties: {label: string}}[]}
if (requestId !== banFetchId) return
banOptions.value = data.features.map(f => ({
label: f.properties.label,
value: f.properties.label,
}))
} catch (err) {
if (requestId !== banFetchId) return
banOptions.value = []
console.error('Erreur lors du chargement des adresses BAN', err)
} finally {
if (requestId === banFetchId) banLoading.value = false
}
}
const onCreateBan = (value: string) => {
console.log('BAN valeur libre créée :', value)
}
</script>