From fcbdb23349a467b3a17db63746c8c24cfcef53fe Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 3 May 2024 16:15:53 +0200 Subject: [PATCH 1/6] =?UTF-8?q?rm=20'ingen=20s=C3=B8ketreff'=20when=20empt?= =?UTF-8?q?y=20list=20with=20custom=20options?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react/src/form/combobox/FilteredOptions/FilteredOptions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx b/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx index d158fc146f..9f74a71a15 100644 --- a/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx +++ b/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx @@ -72,7 +72,7 @@ const FilteredOptions = () => { )} - {!isLoading && filteredOptions.length === 0 && ( + {!isLoading && filteredOptions.length === 0 && !allowNewValues && (
Date: Fri, 3 May 2024 16:32:15 +0200 Subject: [PATCH 2/6] Add changeset.md --- .changeset/moody-dots-compare.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/moody-dots-compare.md diff --git a/.changeset/moody-dots-compare.md b/.changeset/moody-dots-compare.md new file mode 100644 index 0000000000..3c942e75bd --- /dev/null +++ b/.changeset/moody-dots-compare.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Combobox: Remove 'Ingen søketreff' when custom options allowed From d0ce8bb39ed1e17d319bdabdae7b548f82ccd535 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 3 May 2024 16:54:15 +0200 Subject: [PATCH 3/6] made test for adding custom options when not allowed --- .../src/form/combobox/combobox.stories.tsx | 33 +++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/@navikt/core/react/src/form/combobox/combobox.stories.tsx b/@navikt/core/react/src/form/combobox/combobox.stories.tsx index bde9858abe..e3e37687fe 100644 --- a/@navikt/core/react/src/form/combobox/combobox.stories.tsx +++ b/@navikt/core/react/src/form/combobox/combobox.stories.tsx @@ -464,13 +464,13 @@ export const RemoveSelectedMultiSelectTest: StoryObject = { }, }; -export const AddWhenAddNewDisabledTest: StoryObject = { +export const AllowNewValuesTest: StoryObject = { render: () => { return ( ); }, @@ -497,6 +497,35 @@ export const AddWhenAddNewDisabledTest: StoryObject = { }, }; +export const DisallowNewValuesTest: StoryObject = { + render: () => { + return ( + + ); + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + const input = canvas.getByLabelText("Hva er dine favorittfrukter?"); + + userEvent.click(input); + await userEvent.type(input, "aaa", { delay: 200 }); + await sleep(250); + + userEvent.keyboard("{ArrowDown}"); + await sleep(250); + userEvent.keyboard("{ArrowDown}"); + await sleep(250); + userEvent.keyboard("{Enter}"); + await sleep(250); + userEvent.keyboard("{Escape}"); + await sleep(250); + + const invalidSelect = canvas.queryByLabelText("aaa slett"); + expect(invalidSelect).not.toBeInTheDocument(); + }, +}; + export const TestThatCallbacksOnlyFireWhenExpected: StoryObj<{ onChange: ReturnType; onClear: ReturnType; From af1be5f0da5ddfec3061294ba04ed21432ce83c7 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Mon, 6 May 2024 10:39:49 +0200 Subject: [PATCH 4/6] rm unneeded if-condition, rm aria-describedby on non-present element --- .../form/combobox/FilteredOptions/filteredOptionsContext.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx b/@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx index 5d38cbafd4..edcc2534b7 100644 --- a/@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx +++ b/@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx @@ -152,9 +152,9 @@ export const FilteredOptionsProvider = ({ const ariaDescribedBy = useMemo(() => { let activeOption; - if (!isLoading && filteredOptions.length === 0) { + if (!isLoading && filteredOptions.length === 0 && !allowNewValues) { activeOption = filteredOptionsUtils.getNoHitsId(id); - } else if ((value && value !== "") || isLoading) { + } else if (value || isLoading) { if (shouldAutocomplete && filteredOptions[0]) { activeOption = filteredOptionsUtils.getOptionId( id, From 05766b3d9b2682a98bc47a8987251d8795f009cf Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Mon, 6 May 2024 11:37:57 +0200 Subject: [PATCH 5/6] update dependency array --- .../src/form/combobox/FilteredOptions/filteredOptionsContext.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx b/@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx index edcc2534b7..2c81488ad5 100644 --- a/@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx +++ b/@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx @@ -180,6 +180,7 @@ export const FilteredOptionsProvider = ({ shouldAutocomplete, filteredOptions, id, + allowNewValues, ]); const currentOption = useMemo( From aad64ed249a2606bfd195963fed5565f5b54b2f7 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Mon, 6 May 2024 11:48:29 +0200 Subject: [PATCH 6/6] dont render non-selectable option wrapper --- .../react/src/form/combobox/FilteredOptions/FilteredOptions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx b/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx index 9f74a71a15..3dc1126c13 100644 --- a/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx +++ b/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx @@ -38,7 +38,7 @@ const FilteredOptions = () => { const shouldRenderNonSelectables = maxSelected?.isLimitReached || // Render maxSelected message isLoading || // Render loading message - (!isLoading && filteredOptions.length === 0); // Render no hits message + (!isLoading && filteredOptions.length === 0 && !allowNewValues); // Render no hits message const shouldRenderFilteredOptionsList = (allowNewValues && isValueNew && !maxSelected?.isLimitReached) || // Render add new option