Skip to content

Commit

Permalink
fix: memoize getMenuProps (#17022)
Browse files Browse the repository at this point in the history
  • Loading branch information
riddhybansal authored Jul 23, 2024
1 parent dff81f8 commit 8fe1ee3
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 8 deletions.
1 change: 1 addition & 0 deletions packages/react/src/components/ComboBox/ComboBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -654,6 +654,7 @@ const ComboBox = forwardRef(
(helperText && !isFluid && helperTextId) ||
undefined;

// Memoize the value of getMenuProps to avoid an infinite loop
const menuProps = useMemo(
() =>
getMenuProps({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import React, {
type KeyboardEvent,
ReactElement,
useLayoutEffect,
useMemo,
} from 'react';
import { defaultFilterItems } from '../ComboBox/tools/filter';
import {
Expand Down Expand Up @@ -718,7 +719,18 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
},
})
);
const menuProps = getMenuProps({}, { suppressRefError: true });

// Memoize the value of getMenuProps to avoid an infinite loop
const menuProps = useMemo(
() =>
getMenuProps(
{
ref: autoAlign ? refs.setFloating : null,
},
{ suppressRefError: true }
),
[autoAlign]
);

const handleFocus = (evt: FocusEvent<HTMLDivElement> | undefined) => {
if (
Expand Down Expand Up @@ -766,7 +778,9 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
warnText={warnText}
isOpen={isOpen}
size={size}>
<div className={`${prefix}--list-box__field`} ref={refs.setReference}>
<div
className={`${prefix}--list-box__field`}
ref={autoAlign ? refs.setReference : null}>
{controlledSelectedItems.length > 0 && (
// @ts-expect-error: It is expecting a non-required prop called: "onClearSelection"
<ListBoxSelection
Expand Down Expand Up @@ -819,7 +833,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
</div>
{normalizedSlug}

<ListBox.Menu {...menuProps} ref={refs.setFloating}>
<ListBox.Menu {...menuProps}>
{isOpen
? sortedItems.map((item, index) => {
const isChecked =
Expand Down
16 changes: 11 additions & 5 deletions packages/react/src/components/MultiSelect/MultiSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -652,6 +652,15 @@ const MultiSelect = React.forwardRef(
selectedItems.length > 0 &&
selectedItems.map((item) => (item as selectedItemType)?.text);

// Memoize the value of getMenuProps to avoid an infinite loop
const menuProps = useMemo(
() =>
getMenuProps({
ref: autoAlign ? refs.setFloating : null,
}),
[autoAlign]
);

return (
<div className={wrapperClasses}>
<label className={titleClasses} {...getLabelProps()}>
Expand Down Expand Up @@ -687,7 +696,7 @@ const MultiSelect = React.forwardRef(
)}
<div
className={multiSelectFieldWrapperClasses}
ref={refs.setReference}>
ref={autoAlign ? refs.setReference : null}>
{selectedItems.length > 0 && (
<ListBox.Selection
readOnly={readOnly}
Expand Down Expand Up @@ -723,10 +732,7 @@ const MultiSelect = React.forwardRef(
</button>
{normalizedSlug}
</div>
<ListBox.Menu
{...getMenuProps({
ref: refs.setFloating,
})}>
<ListBox.Menu {...menuProps}>
{isOpen &&
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
sortItems!(
Expand Down

0 comments on commit 8fe1ee3

Please sign in to comment.