diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index 172db2034886..848075bf1f2e 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -14,6 +14,7 @@ import React, {
MouseEvent,
ReactNode,
useEffect,
+ useMemo,
} from 'react';
import {
useSelect,
@@ -497,8 +498,13 @@ const Dropdown = React.forwardRef(
},
};
- const menuProps = getMenuProps();
- const menuRef = mergeRefs(menuProps.ref, refs.setFloating);
+ const menuProps = useMemo(
+ () =>
+ getMenuProps({
+ ref: autoAlign ? refs.setFloating : null,
+ }),
+ [autoAlign]
+ );
// Slug is always size `mini`
let normalizedSlug;
@@ -527,7 +533,7 @@ const Dropdown = React.forwardRef(
warnText={warnText}
light={light}
isOpen={isOpen}
- ref={refs.setReference}
+ ref={autoAlign ? refs.setReference : null}
id={id}>
{invalid && (
@@ -567,7 +573,7 @@ const Dropdown = React.forwardRef(
/>
{normalizedSlug}
-
+
{isOpen &&
items.map((item, index) => {
const isObject = item !== null && typeof item === 'object';