[Select] Accept non-component children

packages/mui-material/src/Select/Select.test.js

@@ -79,6 +79,88 @@ describe('<Select />', () => {
     );
   });
 
+  it('should support conditional rendering with empty string', () => {
+    render(
+      <Select open value={2}>
+        {'' && <MenuItem value={1}>One</MenuItem>}
+        <MenuItem value={2}>Two</MenuItem>
+      </Select>,
+    );
+  });
+
+  it('should support conditional rendering with negative number', () => {
+    render(
+      <Select open value={2}>
+        {-1 && <MenuItem value={1}>One</MenuItem>}
+        <MenuItem value={2}>Two</MenuItem>
+      </Select>,
+    );
+  });
+
+  it('should support conditional rendering with zero', () => {
+    render(
+      <Select open value={2}>
+        {0 && <MenuItem value={1}>One</MenuItem>}
+        <MenuItem value={2}>Two</MenuItem>
+      </Select>,
+    );
+  });
+
+  it('should support conditional rendering with NaN', () => {
+    render(
+      <Select open value={2}>
+        {NaN && <MenuItem value={1}>One</MenuItem>}
+        <MenuItem value={2}>Two</MenuItem>
+      </Select>,
+    );
+  });
+
+  it('should support conditional rendering with boolean', () => {
+    render(
+      <Select open value={2}>
+        {true && <MenuItem value={1}>One</MenuItem>}
+        <MenuItem value={2}>Two</MenuItem>
+      </Select>,
+    );
+  });
+
+  it('should support conditional rendering with undefined', () => {
+    render(
+      <Select open value={2}>
+        {undefined && <MenuItem value={1}>One</MenuItem>}
+        <MenuItem value={2}>Two</MenuItem>
+      </Select>,
+    );
+  });
+
+  it('should support conditional rendering with null', () => {
+    render(
+      <Select open value={2}>
+        {null && <MenuItem value={1}>One</MenuItem>}
+        <MenuItem value={2}>Two</MenuItem>
+      </Select>,
+    );
+  });
+
+  it('should support conditional rendering with false', () => {
+    render(
+      <Select open value={2}>
+        {false && <MenuItem value={1}>One</MenuItem>}
+        <MenuItem value={2}>Two</MenuItem>
+      </Select>,
+    );
+  });
+
+  it('should ignore primitive element', () => {
+    render(
+      <Select open value={2}>
+        {'Zero'}
+        <MenuItem value={1}>One</MenuItem>
+        <MenuItem value={2}>Two</MenuItem>
+      </Select>,
+    );
+  });
+
   it('should have an input with [aria-hidden] by default', () => {
     const { container } = render(
       <Select value="10">

packages/mui-material/src/Select/SelectInput.js

@@ -401,7 +401,8 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         return selected;
       }
       const firstSelectableElement = arr.find(
-        (item) => item.props.value !== undefined && item.props.disabled !== true,
+        (item) =>
+          item && item.props && item.props.value !== undefined && item.props.disabled !== true,
       );
       if (child === firstSelectableElement) {
         return true;
@@ -426,7 +427,8 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
       },
       role: 'option',
       selected:
-        arr[0].props.value === undefined || arr[0].props.disabled === true
+        (arr[0] && arr[0].props && arr[0].props.value === undefined) ||
+        (arr[0] && arr[0].props && arr[0].props.disabled === true)
           ? isFirstSelectableElement()
           : selected,
       value: undefined, // The value is most likely not a valid HTML attribute.