diff --git a/.changeset/blue-humans-sin.md b/.changeset/blue-humans-sin.md new file mode 100644 index 000000000..386d70820 --- /dev/null +++ b/.changeset/blue-humans-sin.md @@ -0,0 +1,5 @@ +--- +'@strapi/ui-primitives': major +--- + +fixes the combobox primitive empty state when autocomplete is set to none diff --git a/packages/primitives/src/components/Combobox/Combobox.test.tsx b/packages/primitives/src/components/Combobox/Combobox.test.tsx index 5e3e6c403..b9c4d3f8f 100644 --- a/packages/primitives/src/components/Combobox/Combobox.test.tsx +++ b/packages/primitives/src/components/Combobox/Combobox.test.tsx @@ -965,5 +965,26 @@ describe('Combobox', () => { expect(getByRole('option')).toBeInTheDocument(); }); + + it('should not render the "no result found." when the autocomplete is set to none and options are not empty', async () => { + const { getByRole, queryByText, user } = render({ + autocomplete: 'none', + }); + + await user.click(getByRole('combobox')); + + expect(queryByText('No value found')).not.toBeInTheDocument(); + }); + + it('should render the "no result found." when the autocomplete is set to none and options are empty', async () => { + const { getByRole, getByText, user } = render({ + options: [], + autocomplete: 'none', + }); + + await user.click(getByRole('combobox')); + + expect(getByText('No value found')).toBeInTheDocument(); + }); }); }); diff --git a/packages/primitives/src/components/Combobox/Combobox.tsx b/packages/primitives/src/components/Combobox/Combobox.tsx index c92eef901..106feb006 100644 --- a/packages/primitives/src/components/Combobox/Combobox.tsx +++ b/packages/primitives/src/components/Combobox/Combobox.tsx @@ -1199,6 +1199,8 @@ const ComboboxNoValueFound = React.forwardRef }; }, [subscribe]); + if (autocomplete.type === 'none' && items.length > 0) return null; + if ( autocomplete.type === 'list' && autocomplete.filter === 'startsWith' &&