Merge remote-tracking branch 'origin/master' into pr/theGirrafish/20110

Author: eps1lon

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

@@ -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)

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();

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

@@ -648,7 +648,7 @@ export default function useAutocomplete(props) {
           // Avoid the Modal to handle the event.
           event.stopPropagation();
           handleClose(event);
-        } 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.
@@ -975,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.
    */