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.`; }