diff --git a/packages/react/src/components/form/Combobox/Combobox.stories.tsx b/packages/react/src/components/form/Combobox/Combobox.stories.tsx index 2dae8e5bff..410ab2aaa6 100644 --- a/packages/react/src/components/form/Combobox/Combobox.stories.tsx +++ b/packages/react/src/components/form/Combobox/Combobox.stories.tsx @@ -96,6 +96,7 @@ Preview.args = { disabled: false, hideLabel: false, hideChips: false, + hideClearButton: false, virtual: false, description: 'Velg et sted', size: 'medium', diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx index 34fb6a096f..b484c260d4 100644 --- a/packages/react/src/components/form/Combobox/Combobox.tsx +++ b/packages/react/src/components/form/Combobox/Combobox.tsx @@ -91,8 +91,19 @@ export type ComboboxProps = { /** * Label for the clear button * @default 'Fjern alt' + * @deprecated Use `clearButtonLabel` instead */ cleanButtonLabel?: string; + /** + * Hides the clear button + * @default false + */ + hideClearButton?: boolean; + /** + * Label for the clear button + * @default 'Fjern alt' + */ + clearButtonLabel?: string; /** * Enables virtualizing of options list. * @see https://tanstack.com/virtual @@ -150,6 +161,8 @@ export const Combobox = forwardRef( readOnly = false, hideChips = false, cleanButtonLabel = 'Fjern alt', + clearButtonLabel = 'Fjern alt', + hideClearButton = false, error, errorId, id, @@ -457,7 +470,8 @@ export const Combobox = forwardRef( htmlSize, optionValues, hideChips, - cleanButtonLabel, + clearButtonLabel: cleanButtonLabel || clearButtonLabel, + hideClearButton, listId, setInputValue, setActiveIndex, @@ -606,7 +620,8 @@ type ComboboxContextType = { error: ComboboxProps['error']; htmlSize: ComboboxProps['htmlSize']; hideChips: NonNullable; - cleanButtonLabel: NonNullable; + clearButtonLabel: NonNullable; + hideClearButton: NonNullable; options: Option[]; selectedOptions: Option[]; size: NonNullable; diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx index 036d90074a..134edfa895 100644 --- a/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx +++ b/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx @@ -17,7 +17,7 @@ export const ComboboxClearButton = () => { size, readOnly, disabled, - cleanButtonLabel, + clearButtonLabel, inputRef, setSelectedOptions, setInputValue, @@ -48,7 +48,7 @@ export const ComboboxClearButton = () => { } }} type='button' - aria-label={cleanButtonLabel} + aria-label={clearButtonLabel} > 0; + return ( {/* Clear button if we are in multiple mode and have at least one active value */} - {multiple && selectedOptions.length > 0 && } + {showClearButton && } {/* Arrow for combobox. Click is handled by the wrapper */}
{open ? (