diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
index 66d2ebebeafe..6b6bd8f25038 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -518,8 +518,6 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
return changes;
case InputBlur:
case InputKeyDownEscape:
- setInputFocused(false);
- setInputValue('');
setIsOpen(false);
return changes;
case FunctionToggleMenu:
@@ -714,6 +712,10 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
}
},
onFocus: () => setInputFocused(true),
+ onBlur: () => {
+ !isOpen && setInputFocused(false);
+ setInputValue('');
+ },
})
);
const menuProps = getMenuProps({}, { suppressRefError: true });
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index 433debc08b1d..a9f02f2329a0 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -170,6 +170,20 @@ describe('FilterableMultiSelect', () => {
expect(screen.getByPlaceholderText('test')).toHaveDisplayValue(3);
});
+ it('should clear input value when clicking on cross button', async () => {
+ render();
+ await openMenu();
+
+ await userEvent.type(screen.getByPlaceholderText('test'), '3');
+
+ const clearButton = screen.getByRole('button', {
+ name: 'Clear selected item',
+ });
+ await userEvent.click(clearButton);
+
+ expect(screen.getByPlaceholderText('test')).toHaveDisplayValue('');
+ });
+
it('should respect slug prop', async () => {
const { container } = render(
} />
diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx
index 81236abd643b..0dc3c1f95676 100644
--- a/packages/react/src/components/TextArea/TextArea.tsx
+++ b/packages/react/src/components/TextArea/TextArea.tsx
@@ -459,7 +459,12 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
)}
{input}
{normalizedSlug}
-
+
{ariaAnnouncement}
{isFluid &&
}
diff --git a/packages/react/src/internal/useAnnouncer.js b/packages/react/src/internal/useAnnouncer.js
index 94e787a4b6b5..24b3e00bdd45 100644
--- a/packages/react/src/internal/useAnnouncer.js
+++ b/packages/react/src/internal/useAnnouncer.js
@@ -7,6 +7,9 @@
export function useAnnouncer(textCount, maxCount, entityName = 'characters') {
const lastTen = maxCount - 10;
+ if (textCount == maxCount) {
+ return `Maximum ${entityName} reached.`;
+ }
if (textCount >= lastTen) {
return `${maxCount - textCount} ${entityName} left.`;
}