diff --git a/src/components/experimental/ComboBox/ComboBox.spec.tsx b/src/components/experimental/ComboBox/ComboBox.spec.tsx
index c04ff163..c8a5995c 100644
--- a/src/components/experimental/ComboBox/ComboBox.spec.tsx
+++ b/src/components/experimental/ComboBox/ComboBox.spec.tsx
@@ -39,6 +39,26 @@ describe('ComboBox', () => {
});
});
+ it('hides clear button when hideClearButton is true', () => {
+ render(
+
+ {item => {item.name}}
+
+ );
+
+ expect(screen.queryByRole('button', { name: 'Clear field' })).not.toBeInTheDocument();
+ });
+
+ it('shows clear button by default when input has value', () => {
+ render(
+
+ {item => {item.name}}
+
+ );
+
+ expect(screen.getByRole('button', { name: 'Clear field' })).toBeInTheDocument();
+ });
+
it('calls onSelectionChange when an item is selected', async () => {
const onSelectionChange = jest.fn();
render(
diff --git a/src/components/experimental/ComboBox/ComboBox.tsx b/src/components/experimental/ComboBox/ComboBox.tsx
index ae41f5ae..802e5ebf 100644
--- a/src/components/experimental/ComboBox/ComboBox.tsx
+++ b/src/components/experimental/ComboBox/ComboBox.tsx
@@ -30,6 +30,7 @@ const defaultAriaStrings = {
interface ComboBoxFieldProps extends Pick {
label: string;
placeholder?: string;
+ hideClearButton?: boolean;
/**
* If your project supports multiple languages,
* it is recommended to pass translated labels to these properties
@@ -50,7 +51,7 @@ interface ComboBoxProps>
}
const ComboBoxInput = React.forwardRef(
- ({ label, placeholder, leadingIcon, ariaStrings, inputRef: externalInputRef }, forwardedRef) => {
+ ({ label, placeholder, leadingIcon, ariaStrings, hideClearButton, inputRef: externalInputRef }, forwardedRef) => {
const state = React.useContext(ComboBoxStateContext);
const internalInputRef = React.useRef(null);
@@ -67,7 +68,7 @@ const ComboBoxInput = React.forwardRef(
- {state?.inputValue?.length > 0 ? (
+ {!hideClearButton && state?.inputValue?.length > 0 ? (
- ) : (
+ ) : state?.inputValue?.length > 0 ? null : (
{ariaStrings.messageFieldIsCleared}
)}
@@ -96,6 +97,7 @@ function ComboBoxComponent>(
children,
placeholder,
leadingIcon,
+ hideClearButton,
ariaStrings = defaultAriaStrings,
errorMessage,
description,
@@ -130,6 +132,7 @@ function ComboBoxComponent>(
label={label}
placeholder={placeholder}
leadingIcon={leadingIcon}
+ hideClearButton={hideClearButton}
ariaStrings={ariaStrings}
/>