fix(ihm): le choix du type de documents lors de l'ajout d'un document se...

fix(ihm): le choix du type de documents lors de l'ajout d'un document se referme automatiquement (!1661)

packages/ui/src/components/_ui/typeahead-single.tsx

@@ -131,6 +131,8 @@ export const TypeAheadSingle = defineComponent(<T extends TypeAheadRecord, K ext
     if (props.props.clearAfterSelect === true) {
       deleteSelection(true)
     }
+
+    setInputFocused(false)
   }
   const myTypeaheadInput = ref<HTMLOrSVGElement | null>(null)
 
@@ -164,6 +166,8 @@ export const TypeAheadSingle = defineComponent(<T extends TypeAheadRecord, K ext
           aria-expanded={isListVisible.value}
           aria-autocomplete="list"
           onKeydown={payload => {
+            setInputFocused(true)
+
             // TODO 2023-06-19 il doit bien y avoir une enum quelque part dans la lib du dom avec la liste des keys non ?
             // Oui --> https://github.com/Moh-Snoussi/keyboard-event-key-type
             // Underlying issue: https://github.com/microsoft/TypeScript/issues/38886

packages/ui/src/components/_ui/typeahead.stories.tsx

@@ -81,6 +81,12 @@ export const SmartSingle: StoryFn = () => (
     possibleValues={[
       { id: 'id1', nom: 'Nom' },
       { id: 'id2', nom: 'Autre nom' },
+      { id: 'id3', nom: 'Autre nom 3' },
+      { id: 'id4', nom: 'Autre nom 4' },
+      { id: 'id5', nom: 'Autre nom 5' },
+      { id: 'id6', nom: 'Autre nom 6' },
+      { id: 'id7', nom: 'Autre nom 7' },
+      { id: 'id8', nom: 'Autre nom 8' },
     ]}
     valueIdSelected={selectItems}
   />
@@ -120,6 +126,32 @@ export const VideLaSelectionAuChangementDeContexte: Story = {
     expect(input.value).toBe('')
   },
 }
+export const LaListeDesItemsDisparaitApresUneSelection: Story = {
+  args: {
+    props: {
+      id: 'test',
+      itemKey: 'id',
+      placeholder,
+      items: [{ id: 'Anis' }, { id: 'Michael' }, { id: 'Vincent' }],
+      minInputLength: 1,
+      itemChipLabel: (value: { id: string }) => value.id,
+      onSelectItem: () => {},
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const input: HTMLInputElement = canvas.getByPlaceholderText(placeholder)
+    await userEvent.type(input, 'Anis')
+    const itemList: HTMLElement = canvas.getByRole('listbox')
+    expect(input.value).toBe('Anis')
+    expect(itemList).toBeVisible()
+    const item: HTMLElement = canvas.getByText('Anis')
+    await userEvent.click(item)
+    await sleep(300)
+    expect(input.value).toBe('Anis')
+    expect(itemList).not.toBeVisible()
+  },
+}
 
 export const Multiple: StoryFn = () => (
   <TypeAheadMultiple

packages/ui/src/components/_ui/typeahead.stories_snapshots_LaListeDesItemsDisparaitApresUneSelection.html

+<div id="test_wrapper" class="_typeahead_8eddf1">
+  <div class="flex"><input id="test" type="text" title="Tape le nom d'un développeur" name="test" class="fr-input" placeholder="Tape le nom d'un développeur" autocomplete="off" role="combobox" aria-controls="test-control" aria-activedescendant="test-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
+  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="test-control" role="listbox">
+    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="test-control-0"><span>Anis</span></li>
+    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-1"><span>Michael</span></li>
+    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-2"><span>Vincent</span></li>
+  </ul>
+</div>
\ No newline at end of file

packages/ui/src/components/_ui/typeahead.stories_snapshots_SmartSingle.html

@@ -2,6 +2,12 @@
   <div class="flex"><input id="smartSingle" type="text" title="" name="smartSingle" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="smartSingle-control" aria-activedescendant="smartSingle-control" aria-expanded="false" aria-autocomplete="list" value=""></div>
   <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="smartSingle-control" role="listbox">
     <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="smartSingle-control-0"><span>Autre nom</span></li>
-    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="smartSingle-control-1"><span>Nom</span></li>
+    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="smartSingle-control-1"><span>Autre nom 3</span></li>
+    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="smartSingle-control-2"><span>Autre nom 4</span></li>
+    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="smartSingle-control-3"><span>Autre nom 5</span></li>
+    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="smartSingle-control-4"><span>Autre nom 6</span></li>
+    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="smartSingle-control-5"><span>Autre nom 7</span></li>
+    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="smartSingle-control-6"><span>Autre nom 8</span></li>
+    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="smartSingle-control-7"><span>Nom</span></li>
   </ul>
 </div>
\ No newline at end of file