(item ? item.text : '')}
+ />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
@@ -373,6 +428,23 @@ export const Playground = ({ numberOfButtons, ...args }) => {
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
+
+
+
+ {
+ setPopoverOpen(!popoverOpen);
+ }}
+ />
+
+
+ Popover Example
+
+ This server has 150 GB of block storage remaining.
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
index e0a9a2def1f3..eef35bc96692 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -462,6 +462,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
[`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
[`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
[`${prefix}--list-box__wrapper--slug`]: slug,
+ [`${prefix}--autoalign`]: autoAlign,
}
);
const helperId = !helperText
@@ -506,11 +507,12 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
const nextIsOpen = forceIsOpen ?? !isOpen;
setIsOpen(nextIsOpen);
validateHighlightFocus();
- if (onMenuChange) {
- onMenuChange(nextIsOpen);
- }
}
+ useEffect(() => {
+ onMenuChange?.(isOpen);
+ }, [isOpen, onMenuChange]);
+
const {
getToggleButtonProps,
getLabelProps,
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index 3a51d62a2a20..e7d43a14ceef 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -306,6 +306,9 @@ Filterable.argTypes = {
onChange: {
action: 'onChange',
},
+ onMenuChange: {
+ action: 'onMenuChange',
+ },
};
export const WithLayerMultiSelect = () => (
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index 380abda132f7..392f16774cba 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -551,6 +551,7 @@ const MultiSelect = React.forwardRef(
selectedItems && selectedItems.length > 0,
[`${prefix}--list-box--up`]: direction === 'top',
[`${prefix}--multi-select--readonly`]: readOnly,
+ [`${prefix}--autoalign`]: autoAlign,
[`${prefix}--multi-select--selectall`]: selectAll,
});
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index 6bf43cb854c6..a6af8ad0e00d 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -47,6 +47,22 @@ describe('FilterableMultiSelect', () => {
expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
});
+ it('should call `onMenuChange` when the user clicks on the combobox', async () => {
+ render();
+ await waitForPosition();
+
+ await userEvent.click(screen.getByRole('combobox'));
+ expect(mockProps.onMenuChange).toHaveBeenCalledWith(true);
+ });
+
+ it('should call `onMenuChange` when the user clicks on the screen', async () => {
+ render();
+ await waitForPosition();
+
+ await userEvent.click(document.body);
+ expect(mockProps.onMenuChange).toHaveBeenCalledWith(false);
+ });
+
it('should initially have the menu open when open prop is provided', async () => {
render();
await waitForPosition();
@@ -54,6 +70,13 @@ describe('FilterableMultiSelect', () => {
assertMenuOpen(mockProps);
});
+ it('should call `onMenuChange` when open prop is provided', async () => {
+ render();
+ await waitForPosition();
+
+ expect(mockProps.onMenuChange).toHaveBeenCalledWith(true);
+ });
+
it('should open the menu with a down arrow', async () => {
render();
await waitForPosition();
@@ -64,6 +87,15 @@ describe('FilterableMultiSelect', () => {
expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
});
+ it('should call `onMenuChange` when the user types a down arrow', async () => {
+ render();
+ await waitForPosition();
+
+ const menuIconNode = findMenuIconNode();
+ await userEvent.type(menuIconNode, '{arrowdown}');
+ expect(mockProps.onMenuChange).toHaveBeenCalledWith(true);
+ });
+
it('should let the user toggle the menu by the menu icon', async () => {
render();
await waitForPosition();
@@ -76,6 +108,17 @@ describe('FilterableMultiSelect', () => {
assertMenuClosed();
});
+ it('should call `onMenuChange` when the user toggles the menu by the menu icon', async () => {
+ render();
+ await waitForPosition();
+
+ await userEvent.click(findMenuIconNode());
+ expect(mockProps.onMenuChange).toHaveBeenCalledWith(true);
+
+ await userEvent.click(findMenuIconNode());
+ expect(mockProps.onMenuChange).toHaveBeenCalledWith(false);
+ });
+
it('should not close the menu after a user makes a selection', async () => {
render();
await waitForPosition();
diff --git a/packages/react/src/components/Notification/Notification.tsx b/packages/react/src/components/Notification/Notification.tsx
index 83ce57ef3ac1..8ac2b621d493 100644
--- a/packages/react/src/components/Notification/Notification.tsx
+++ b/packages/react/src/components/Notification/Notification.tsx
@@ -62,7 +62,10 @@ function useEscapeToClose(ref, callback, override = true) {
};
useIsomorphicEffect(() => {
- document.addEventListener('keydown', handleKeyDown, false);
+ if (ref.current !== null) {
+ document.addEventListener('keydown', handleKeyDown, false);
+ }
+
return () => document.removeEventListener('keydown', handleKeyDown, false);
});
}
diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js
index e01818e66ca2..f43f094982dc 100644
--- a/packages/react/src/components/NumberInput/NumberInput.stories.js
+++ b/packages/react/src/components/NumberInput/NumberInput.stories.js
@@ -81,26 +81,38 @@ export const withAILabel = () => (
/>