From 2bf788dc71976bba1a14a3eada061bd3820731de Mon Sep 17 00:00:00 2001
From: SAFINE LAGET Anis <anis.safine@beta.gouv.fr>
Date: Mon, 10 Mar 2025 09:58:45 +0000
Subject: [PATCH] fix(ihm): le choix du type de documents lors de l'ajout d'un
document se referme automatiquement (pub/pnm-public/camino!1661)
---
.../src/components/_ui/typeahead-single.tsx | 4 +++
.../src/components/_ui/typeahead.stories.tsx | 32 +++++++++++++++++++
...steDesItemsDisparaitApresUneSelection.html | 8 +++++
...peahead.stories_snapshots_SmartSingle.html | 8 ++++-
4 files changed, 51 insertions(+), 1 deletion(-)
create mode 100644 packages/ui/src/components/_ui/typeahead.stories_snapshots_LaListeDesItemsDisparaitApresUneSelection.html
diff --git a/packages/ui/src/components/_ui/typeahead-single.tsx b/packages/ui/src/components/_ui/typeahead-single.tsx
index 263a94267..5d25befe2 100644
--- a/packages/ui/src/components/_ui/typeahead-single.tsx
+++ b/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
diff --git a/packages/ui/src/components/_ui/typeahead.stories.tsx b/packages/ui/src/components/_ui/typeahead.stories.tsx
index 27a3917e9..bfb0a2eef 100644
--- a/packages/ui/src/components/_ui/typeahead.stories.tsx
+++ b/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
diff --git a/packages/ui/src/components/_ui/typeahead.stories_snapshots_LaListeDesItemsDisparaitApresUneSelection.html b/packages/ui/src/components/_ui/typeahead.stories_snapshots_LaListeDesItemsDisparaitApresUneSelection.html
new file mode 100644
index 000000000..b4beafd31
--- /dev/null
+++ b/packages/ui/src/components/_ui/typeahead.stories_snapshots_LaListeDesItemsDisparaitApresUneSelection.html
@@ -0,0 +1,8 @@
+<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
diff --git a/packages/ui/src/components/_ui/typeahead.stories_snapshots_SmartSingle.html b/packages/ui/src/components/_ui/typeahead.stories_snapshots_SmartSingle.html
index 106f996f3..ba14811fd 100644
--- a/packages/ui/src/components/_ui/typeahead.stories_snapshots_SmartSingle.html
+++ b/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
--
GitLab