findSelectItems

mui · Aug 23, 2024 · eb20aea · eb20aea
1 parent 7bed7cc
commit eb20aea
Showing 1 changed file with 23 additions and 3 deletions.
diff --git a/packages/mui-base/src/Select/Positioner/SelectPositioner.tsx b/packages/mui-base/src/Select/Positioner/SelectPositioner.tsx
@@ -18,6 +18,21 @@ import { useSelectPositioner } from './useSelectPositioner';
 import { HTMLElementType } from '../../utils/proptypes';
 import { visuallyHidden } from '../../utils/visuallyHidden';
 
+function findSelectItems(root: React.ReactElement) {
+  const selectItems: React.ReactElement[] = [];
+  React.Children.forEach(root.props?.children, (child) => {
+    if (React.isValidElement(child)) {
+      const childProps = child.props as any;
+      if (childProps?.value) {
+        selectItems.push(child);
+      } else if (childProps?.children) {
+        selectItems.push(...findSelectItems(child));
+      }
+    }
+  });
+  return selectItems;
+}
+
 /**
  * Renders the element that positions the Select popup.
  *
@@ -152,11 +167,16 @@ const SelectPositioner = React.forwardRef(function SelectPositioner(
   });
 
   const positionerElement = renderElement();
-
-  const selectItems = positionerElement.props.children.props.children as React.ReactElement[];
+  const selectItems = findSelectItems(positionerElement);
   const mountedItemsElement = <div hidden>{selectItems}</div>;
   const nativeSelectElement = (
-    <select style={visuallyHidden} tabIndex={-1} aria-hidden>
+    <select
+      style={visuallyHidden}
+      tabIndex={-1}
+      aria-hidden
+      // @ts-ignore
+      inert
+    >
       {selectItems.map((item) => (
         // eslint-disable-next-line jsx-a11y/control-has-associated-label
         <option key={item.props.value} value={item.props.value} />