.playground/pages/composant/input/inputAutocomplete.vue

@@ -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>

CHANGELOG.md

@@ -72,6 +72,7 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-42] Button / ButtonIcon : l'anneau de focus passe du halo `ring-2 ring-m-primary/50` à l'anneau standard `.m-focus-ring` (outline plein, offset 2px), pour l'homogénéité avec les autres composants.
 
 ### Fixed
+* [#MUI-48] InputAutocomplete : 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 (label qui redescend, dropdown « Tapez pour rechercher »). Cause : `onSelect` repassait `isFocused` à `false` alors que l'input gardait le focus DOM (option cliquée en `mousedown.prevent`) ; le `watch` de synchronisation, non protégé, remettait `inputValue` à `''`. `onInput` resynchronise désormais `isFocused`. La sélection à la souris n'était pas affectée (re-clic réalignant l'état).
 * [#MUI-47] Sidebar : la **bande de ~4px en haut/bas d'un lien** (padding du `<li>` qui porte le fond de hover) était survolée mais **non cliquable**. Le padding vertical passe du `<li>` à l'`<a>` (`py-1`), si bien que toute la zone survolée devient cliquable — sans changement visuel. Les côtés n'étaient pas affectés (`<a>` en `block`, pas de padding horizontal sur le `<li>`).
 * Sidebar : le **lien actif** reste actif sur les **sous-routes** (match par préfixe via `useRoute().path` au lieu de l'`active-class` de NuxtLink qui dépendait de l'imbrication des routes) — ex. `/supplier` reste surligné sur `/supplier/1/edit`. Nouvelle option `exact: true` par item pour forcer le match strict.
 * Famille Date (CalendarField) : le **clic sur le picto calendrier** ouvre désormais le popover (le `<Icon>` en overlay absolu interceptait le clic sans le traiter, et ne le laissait pas retomber sur l'input). Couvre Date, DateTime, DateRange, DateWeek. La croix d'effacement conserve son comportement (efface sans ouvrir).

app/components/malio/input/InputAutocomplete.test.ts

@@ -1,6 +1,6 @@
 import {describe, expect, it, vi} from 'vitest'
 import {mount} from '@vue/test-utils'
-import type {DefineComponent} from 'vue'
+import {defineComponent, nextTick, ref, type DefineComponent} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
 import InputAutocomplete from './InputAutocomplete.vue'
 
@@ -569,4 +569,40 @@ describe('MalioInputAutocomplete', () => {
     expect(msg.exists()).toBe(true)
     expect(msg.classes()).not.toContain('min-h-[1rem]')
   })
+
+  // MUI-48 : après avoir sélectionné une option dans la liste, le champ garde le focus DOM
+  // mais isFocused interne passe à false (clic option en mousedown.prevent). Un collage qui
+  // remplace tout (Ctrl+A puis Ctrl+V) déclenche update:modelValue(null) ; le watch ne doit
+  // PAS vider la valeur collée. Régression : le champ se vidait au lieu de prendre le texte collé.
+  it('MUI-48 : un collage après sélection dans la liste remplace la valeur (ne la vide pas)', async () => {
+    const Harness = defineComponent({
+      components: {InputAutocomplete},
+      setup() {
+        const val = ref<string | number | null>(null)
+        const opts = ref([{label: '10 Rue de la Paix', value: '10 Rue de la Paix'}])
+        return {val, opts}
+      },
+      template: '<InputAutocomplete v-model="val" :options="opts" allow-create />',
+    })
+
+    const wrapper = mount(Harness, {
+      attachTo: document.body,
+      global: {stubs: {IconifyIcon: {template: '<span data-test="icon" v-bind="$attrs" />'}}},
+    })
+    const input = wrapper.get('input')
+
+    // saisie puis sélection d'une suggestion (commit, focus DOM conservé)
+    await input.trigger('focus')
+    await input.setValue('10')
+    await wrapper.findAll('[data-test="option"]')[0].trigger('click')
+    await nextTick()
+    expect(input.element.value).toBe('10 Rue de la Paix')
+
+    // Ctrl+A puis Ctrl+V : input toujours focalisé DOM, aucun nouvel évènement focus
+    await input.setValue('25 Avenue Victor Hugo')
+    await nextTick()
+
+    expect(input.element.value).toBe('25 Avenue Victor Hugo')
+    wrapper.unmount()
+  })
 })

app/components/malio/input/InputAutocomplete.vue

@@ -393,6 +393,11 @@ const scheduleSearch = () => {
 
 const onInput = (event: Event) => {
   const target = event.target as HTMLInputElement
+  // Un évènement input prouve que le champ est en cours d'édition : on resynchronise
+  // isFocused, qu'une sélection précédente (onSelect) a pu passer à false tout en gardant
+  // le focus DOM (clic option en mousedown.prevent). Sans ça, le watch ci-dessous remettrait
+  // inputValue à '' au collage et la valeur collée serait perdue (MUI-48).
+  isFocused.value = true
   inputValue.value = target.value
   if (!isOpen.value) isOpen.value = true
   activeIndex.value = -1