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 diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx b/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx index d158fc146f..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 @@ -72,7 +72,7 @@ const FilteredOptions = () => { )} - {!isLoading && filteredOptions.length === 0 && ( + {!isLoading && filteredOptions.length === 0 && !allowNewValues && (
{ 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, @@ -180,6 +180,7 @@ export const FilteredOptionsProvider = ({ shouldAutocomplete, filteredOptions, id, + allowNewValues, ]); const currentOption = useMemo( 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;