Merge branch 'master' into autocomplete_bugfix

azure-pipelines.yml

@@ -6,6 +6,12 @@ trigger:
       - l10n
       - dependabot/*
 
+# https://developercommunity.visualstudio.com/comments/949241/view.html
+pr:
+  branches:
+    include:
+    - '*' 
+
 pool:
   vmImage: 'ubuntu-latest'
 

docs/next.config.js

@@ -13,6 +13,11 @@ const workspaceRoot = path.join(__dirname, '../');
 const reactMode = 'legacy';
 
 module.exports = {
+  typescript: {
+    // Motivated by https://github.com/zeit/next.js/issues/7687
+    ignoreDevErrors: true,
+    ignoreBuildErrors: true,
+  },
   webpack: (config, options) => {
     const plugins = config.plugins.concat([
       new webpack.DefinePlugin({

docs/package.json

@@ -64,7 +64,7 @@
     "cross-fetch": "^3.0.4",
     "css-loader": "^3.1.0",
     "css-mediaquery": "^0.1.2",
-    "date-fns": "2.10.0",
+    "date-fns": "2.11.0",
     "docsearch.js": "^2.6.3",
     "doctrine": "^3.0.0",
     "express": "^4.17.1",

docs/pages/api-docs/autocomplete.md

@@ -34,7 +34,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">clearText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Clear'</span> | Override the default text for the *clear* icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">closeIcon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CloseIcon fontSize="small" /></span> | The icon to display in place of the default close icon. |
 | <span class="prop-name">closeText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Close'</span> | Override the default text for the *close popup* icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
-| <span class="prop-name">debug</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the popup will ignore the blur event if the input if filled. You can inspect the popup markup with your browser tools. Consider this option when you need to customize the component. |
+| <span class="prop-name">debug</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the popup will ignore the blur event if the input is filled. You can inspect the popup markup with your browser tools. Consider this option when you need to customize the component. |
 | <span class="prop-name">defaultValue</span> | <span class="prop-type">any<br>&#124;&nbsp;array</span> | <span class="prop-default">props.multiple ? [] : null</span> | The default input value. Use when the component is not controlled. |
 | <span class="prop-name">disableClearable</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the input can't be cleared. |
 | <span class="prop-name">disableCloseOnSelect</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the popup won't close when a value is selected. |

docs/src/pages/components/autocomplete/autocomplete.md

@@ -26,7 +26,7 @@ Each of the following examples demonstrate one feature of the Autocomplete compo
 
 ### Country select
 
-Choose one country between 248.
+Choose one of the 248 countries.
 
 {{"demo": "pages/components/autocomplete/CountrySelect.js"}}
 
@@ -220,6 +220,10 @@ To fully take advantage of type inference, you need to set the `multiple` prop t
 See [this discussion](https://github.com/mui-org/material-ui/pull/18854#discussion_r364215153) for more details.
 TypeScript might solve this bug in the future.
 
+### ListboxComponent
+
+If you provide a custom `ListboxComponent` prop, you need to make sure that the intended scroll container has the `role` attribute set to `listbox`. This ensures the correct behavior of the scroll, for example when using the keyboard to navigate.
+
 ## Accessibility
 
 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox)

docs/src/pages/components/selects/NativeSelects.js

@@ -23,12 +23,6 @@ export default function NativeSelects() {
     name: 'hai',
   });
 
-  const inputLabel = React.useRef(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current.offsetWidth);
-  }, []);
-
   const handleChange = name => event => {
     setState({
       ...state,
@@ -200,14 +194,12 @@ export default function NativeSelects() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple">
-          Age
-        </InputLabel>
+        <InputLabel htmlFor="outlined-age-native-simple">Age</InputLabel>
         <Select
           native
           value={state.age}
           onChange={handleChange('age')}
-          labelWidth={labelWidth}
+          label="Age"
           inputProps={{
             name: 'age',
             id: 'outlined-age-native-simple',

docs/src/pages/components/selects/NativeSelects.tsx

@@ -25,12 +25,6 @@ export default function NativeSelects() {
     name: 'hai',
   });
 
-  const inputLabel = React.useRef<HTMLLabelElement>(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current!.offsetWidth);
-  }, []);
-
   const handleChange = (name: keyof typeof state) => (
     event: React.ChangeEvent<{ value: unknown }>,
   ) => {
@@ -204,14 +198,12 @@ export default function NativeSelects() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple">
-          Age
-        </InputLabel>
+        <InputLabel htmlFor="outlined-age-native-simple">Age</InputLabel>
         <Select
           native
           value={state.age}
           onChange={handleChange('age')}
-          labelWidth={labelWidth}
+          label="Age"
           inputProps={{
             name: 'age',
             id: 'outlined-age-native-simple',

docs/src/pages/components/selects/SimpleSelect.js

@@ -20,12 +20,6 @@ export default function SimpleSelect() {
   const classes = useStyles();
   const [age, setAge] = React.useState('');
 
-  const inputLabel = React.useRef(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current.offsetWidth);
-  }, []);
-
   const handleChange = event => {
     setAge(event.target.value);
   };
@@ -195,15 +189,13 @@ export default function SimpleSelect() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
-          Age
-        </InputLabel>
+        <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
         <Select
           labelId="demo-simple-select-outlined-label"
           id="demo-simple-select-outlined"
           value={age}
           onChange={handleChange}
-          labelWidth={labelWidth}
+          label="Age"
         >
           <MenuItem value="">
             <em>None</em>

docs/src/pages/components/selects/SimpleSelect.tsx

@@ -22,12 +22,6 @@ export default function SimpleSelect() {
   const classes = useStyles();
   const [age, setAge] = React.useState('');
 
-  const inputLabel = React.useRef<HTMLLabelElement>(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current!.offsetWidth);
-  }, []);
-
   const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
     setAge(event.target.value as string);
   };
@@ -197,15 +191,13 @@ export default function SimpleSelect() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
-          Age
-        </InputLabel>
+        <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
         <Select
           labelId="demo-simple-select-outlined-label"
           id="demo-simple-select-outlined"
           value={age}
           onChange={handleChange}
-          labelWidth={labelWidth}
+          label="Age"
         >
           <MenuItem value="">
             <em>None</em>

package.json

@@ -53,7 +53,7 @@
     "@babel/preset-react": "^7.8.3",
     "@babel/register": "^7.8.6",
     "@rollup/plugin-replace": "^2.3.1",
-    "@testing-library/dom": "^6.8.1",
+    "@testing-library/dom": "^7.0.3",
     "@testing-library/react": "^9.3.2",
     "@testing-library/react-hooks": "3.2.1",
     "@types/chai": "^4.2.3",

packages/material-ui-lab/src/Autocomplete/Autocomplete.js

@@ -542,7 +542,7 @@ Autocomplete.propTypes = {
    */
   closeText: PropTypes.string,
   /**
-   * If `true`, the popup will ignore the blur event if the input if filled.
+   * If `true`, the popup will ignore the blur event if the input is filled.
    * You can inspect the popup markup with your browser tools.
    * Consider this option when you need to customize the component.
    */

packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js

@@ -456,6 +456,29 @@ describe('<Autocomplete />', () => {
     });
   });
 
+  describe('prop: clearOnEscape', () => {
+    it('should clear on escape', () => {
+      const handleChange = spy();
+      render(
+        <Autocomplete
+          {...defaultProps}
+          onChange={handleChange}
+          clearOnEscape
+          multiple
+          value={['one']}
+          options={['one', 'two']}
+          renderInput={params => <TextField {...params} autoFocus />}
+        />,
+      );
+
+      fireEvent.keyDown(document.activeElement, { key: 'Escape' });
+      fireEvent.keyDown(document.activeElement, { key: 'Escape' });
+
+      expect(handleChange.callCount).to.equal(1);
+      expect(handleChange.args[0][1]).to.deep.equal([]);
+    });
+  });
+
   describe('when popup open', () => {
     it('closes the popup if Escape is pressed ', () => {
       const handleClose = spy();
@@ -778,7 +801,7 @@ describe('<Autocomplete />', () => {
       expect(handleChange.args[0][1]).to.equal('a');
       expect(consoleErrorMock.callCount()).to.equal(2); // strict mode renders twice
       expect(consoleErrorMock.messages()[0]).to.include(
-        'For the input option: "a", `getOptionLabel` returns: undefined',
+        'the `getOptionLabel` method of Autocomplete returned undefined instead of a string',
       );
     });
 

packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts

@@ -53,7 +53,7 @@ export interface UseAutocompleteCommonProps<T> {
    */
   componentName?: string;
   /**
-   * If `true`, the popup will ignore the blur event if the input if filled.
+   * If `true`, the popup will ignore the blur event if the input is filled.
    * You can inspect the popup markup with your browser tools.
    * Consider this option when you need to customize the component.
    */

packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js

@@ -197,13 +197,12 @@ export default function useAutocomplete(props) {
 
       if (process.env.NODE_ENV !== 'production') {
         if (typeof optionLabel !== 'string') {
+          const erroneousReturn =
+            optionLabel === undefined ? 'undefined' : `${typeof optionLabel} (${optionLabel})`;
           console.error(
             [
-              'Material-UI: the `getOptionLabel` method of useAutocomplete do not handle the options correctly.',
-              `The component expect a string but received ${typeof optionLabel}.`,
-              `For the input option: ${JSON.stringify(
-                newValue,
-              )}, \`getOptionLabel\` returns: ${optionLabel}.`,
+              `Material-UI: the \`getOptionLabel\` method of ${componentName} returned ${erroneousReturn} instead of a string for`,
+              JSON.stringify(newValue),
             ].join('\n'),
           );
         }
@@ -465,7 +464,7 @@ export default function useAutocomplete(props) {
         if (matches.length > 1) {
           console.error(
             [
-              'Material-UI: the `getOptionSelected` method of useAutocomplete do not handle the arguments correctly.',
+              `Material-UI: the \`getOptionSelected\` method of ${componentName} do not handle the arguments correctly.`,
               `The component expects a single value to match a given option but found ${
                 matches.length
               } matches.`,
@@ -649,7 +648,7 @@ export default function useAutocomplete(props) {
           // Avoid the Modal to handle the event.
           event.stopPropagation();
           handleClose(event, 'escape');
-        } else if (clearOnEscape && inputValue !== '') {
+        } else if (clearOnEscape && (inputValue !== '' || (multiple && value.length > 0))) {
           // Avoid Opera to exit fullscreen mode.
           event.preventDefault();
           // Avoid the Modal to handle the event.
@@ -976,7 +975,7 @@ useAutocomplete.propTypes = {
    */
   componentName: PropTypes.string,
   /**
-   * If `true`, the popup will ignore the blur event if the input if filled.
+   * If `true`, the popup will ignore the blur event if the input is filled.
    * You can inspect the popup markup with your browser tools.
    * Consider this option when you need to customize the component.
    */

packages/material-ui/src/styles/createPalette.d.ts

@@ -15,8 +15,13 @@ export interface TypeAction {
   hover: string;
   hoverOpacity: number;
   selected: string;
+  selectedOpacity: number;
   disabled: string;
+  disabledOpacity: number;
   disabledBackground: string;
+  focus: string;
+  focusOpacity: number;
+  activatedOpacity: number;
 }
 
 export interface TypeBackground {

scripts/prettier.js

@@ -65,7 +65,7 @@ function runPrettier(changedFiles) {
     console.log(
       '\n\nThis project uses prettier to format all JavaScript code.\n' +
         `Please run '${!changedFiles ? 'yarn prettier:all' : 'yarn prettier'}'` +
-        'and commit the changes to the files listed below:\n\n',
+        ' and commit the changes to the files listed below:\n\n',
     );
     console.log(warnedFiles.join('\n'));
   }