diff --git a/.github/renovate.json5 b/.github/renovate.json5 index 31a7ddfb270d..c21cbad18eaf 100644 --- a/.github/renovate.json5 +++ b/.github/renovate.json5 @@ -13,7 +13,7 @@ 'npm:unpublishSafe', // https://docs.renovatebot.com/presets-schedule/#scheduledaily - 'schedule:weekday', + 'schedule:every weekday', ], vulnerabilityAlerts: { enabled: true, diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx index 3fa05acf5ae3..9fdf344dd3e5 100644 --- a/packages/react/src/components/ComboBox/ComboBox.tsx +++ b/packages/react/src/components/ComboBox/ComboBox.tsx @@ -13,6 +13,7 @@ import React, { useEffect, useState, useRef, + useMemo, forwardRef, type ReactNode, type ComponentType, @@ -655,6 +656,15 @@ const ComboBox = forwardRef( (helperText && !isFluid && helperTextId) || undefined; + const menuProps = useMemo( + () => + getMenuProps({ + 'aria-label': deprecatedAriaLabel || ariaLabel, + ref: autoAlign ? refs.setFloating : null, + }), + [autoAlign, deprecatedAriaLabel, ariaLabel] + ); + return (
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + accumsan augue. Phasellus consequat augue vitae tellus tincidunt + posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices + condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. + Quisque consectetur non risus eu rutrum.{' '} +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id + accumsan augue. Phasellus consequat augue vitae tellus tincidunt + posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices + condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. + Quisque consectetur non risus eu rutrum.{' '} +
+ {args.hasScrollingContent && ( <>
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(