[Select] Fix display when no value is selected

packages/material-ui-styles/src/index.js

@@ -1,7 +1,11 @@
 import { ponyfillGlobal } from '@material-ui/utils';
 
 /* Warning if there are several instances of @material-ui/styles */
-if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') {
+if (
+  process.env.NODE_ENV !== 'production' &&
+  process.env.NODE_ENV !== 'test' &&
+  typeof window !== 'undefined'
+) {
   ponyfillGlobal['__@material-ui/styles-init__'] =
     ponyfillGlobal['__@material-ui/styles-init__'] || 0;
 

packages/material-ui/src/ListItem/ListItem.js

@@ -91,7 +91,7 @@ const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : Reac
 const ListItem = React.forwardRef(function ListItem(props, ref) {
   const {
     alignItems = 'center',
-    autoFocus,
+    autoFocus = false,
     button = false,
     children: childrenProp,
     classes,

packages/material-ui/src/MenuList/MenuList.js

@@ -80,7 +80,14 @@ function moveFocus(list, currentFocus, disableListWrap, traversalFunction, textC
 const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 
 const MenuList = React.forwardRef(function MenuList(props, ref) {
-  const { actions, autoFocus, className, onKeyDown, disableListWrap = false, ...other } = props;
+  const {
+    actions,
+    autoFocus = false,
+    className,
+    onKeyDown,
+    disableListWrap = false,
+    ...other
+  } = props;
   const listRef = React.useRef(null);
   const textCriteriaRef = React.useRef({
     keys: [],

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

@@ -175,7 +175,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
   delete other['aria-invalid'];
 
   let display;
-  let displaySingle = '';
+  let displaySingle;
   const displayMultiple = [];
   let computeDisplay = false;
 

packages/material-ui/src/Select/SelectInput.test.js

@@ -122,7 +122,7 @@ describe('<SelectInput />', () => {
         <SelectInput {...defaultProps} SelectDisplayProps={{ 'data-test': 'SelectDisplay' }} />,
       );
 
-      const selectDisplay = wrapper.find('[data-mui-test="SelectDisplay"]');
+      const selectDisplay = wrapper.find('[role="button"]');
       assert.strictEqual(selectDisplay.props()['data-test'], 'SelectDisplay');
     });
   });
@@ -287,15 +287,15 @@ describe('<SelectInput />', () => {
   describe('prop: autoWidth', () => {
     it('should take the anchor width into account', () => {
       const wrapper = mount(<SelectInput {...defaultProps} />);
-      const selectDisplay = wrapper.find('[data-mui-test="SelectDisplay"]').instance();
+      const selectDisplay = wrapper.find('[role="button"]').instance();
       stub(selectDisplay, 'clientWidth').get(() => 14);
       wrapper.find(`.${defaultProps.classes.select}`).simulate('click');
       assert.strictEqual(wrapper.find(Menu).props().PaperProps.style.minWidth, 14);
     });
 
     it('should not take the anchor width into account', () => {
       const wrapper = mount(<SelectInput {...defaultProps} autoWidth />);
-      const selectDisplay = wrapper.find('[data-mui-test="SelectDisplay"]').instance();
+      const selectDisplay = wrapper.find('[role="button"]').instance();
       stub(selectDisplay, 'clientWidth').get(() => 14);
       wrapper.find(`.${defaultProps.classes.select}`).simulate('click');
       assert.strictEqual(wrapper.find(Menu).props().PaperProps.style.minWidth, null);
@@ -305,7 +305,7 @@ describe('<SelectInput />', () => {
   describe('prop: multiple', () => {
     it('should take precedence', () => {
       const wrapper = shallow(<SelectInput {...defaultProps} disabled tabIndex={0} />);
-      assert.strictEqual(wrapper.find('[data-mui-test="SelectDisplay"]').props().tabIndex, 0);
+      assert.strictEqual(wrapper.find('[role="button"]').props().tabIndex, 0);
     });
 
     it('should serialize multiple select value', () => {

pages/api/list-item.md

@@ -19,7 +19,7 @@ Uses an additional container component if `ListItemSecondaryAction` is the last
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">alignItems</span> | <span class="prop-type">enum:&nbsp;'flex-start'&nbsp;&#124;<br>&nbsp;'center'<br></span> | <span class="prop-default">'center'</span> | Defines the `align-items` style property. |
-| <span class="prop-name">autoFocus</span> | <span class="prop-type">bool</span> |  | If `true`, the list item will be focused during the first mount. Focus will also be triggered if the value changes from false to true. |
+| <span class="prop-name">autoFocus</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the list item will be focused during the first mount. Focus will also be triggered if the value changes from false to true. |
 | <span class="prop-name">button</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the list item will be a button (using `ButtonBase`). |
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. If a `ListItemSecondaryAction` is used it must be the last child. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |

pages/api/menu-list.md

@@ -18,7 +18,7 @@ import MenuList from '@material-ui/core/MenuList';
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">autoFocus</span> | <span class="prop-type">bool</span> |  | If `true`, the list will be focused during the first mount. Focus will also be triggered if the value changes from false to true. |
+| <span class="prop-name">autoFocus</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the list will be focused during the first mount. Focus will also be triggered if the value changes from false to true. |
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | MenuList contents, normally `MenuItem`s. |
 | <span class="prop-name">disableListWrap</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the menu items will not wrap focus. |
 

test/regressions/tests/Select/SelectAlignment.js

@@ -6,7 +6,7 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 
-function SelectAlignment() {
+export default function SelectAlignment() {
   return (
     <div>
       <FormControl>
@@ -35,5 +35,3 @@ function SelectAlignment() {
     </div>
   );
 }
-
-export default SelectAlignment;

test/regressions/tests/Select/SelectMissingValue.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+
+export default function SelectMissingValue() {
+  return (
+    <Select value={0}>
+      <MenuItem value={10}>Ten</MenuItem>
+    </Select>
+  );
+}

test/regressions/tests/Select/SelectOverflow.js

@@ -2,7 +2,7 @@ import React from 'react';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 
-function SelectOverflow() {
+export default function SelectOverflow() {
   return (
     <Select value={10} style={{ maxWidth: 100 }}>
       <MenuItem value="">
@@ -12,5 +12,3 @@ function SelectOverflow() {
     </Select>
   );
 }
-
-export default SelectOverflow;