[Autocomplete] Remove debug in favor of react-devtools (#23377)

docs/pages/api-docs/autocomplete.md

@@ -39,7 +39,6 @@ The `MuiAutocomplete` name can be used for providing [default props](/customizat
 | <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 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</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/Playground.js

@@ -17,14 +17,6 @@ export default function Playground() {
 
   return (
     <div style={{ width: 300 }}>
-      <Autocomplete
-        {...defaultProps}
-        id="debug"
-        debug
-        renderInput={(params) => (
-          <TextField {...params} label="debug" margin="normal" />
-        )}
-      />
       <Autocomplete
         {...defaultProps}
         id="disable-close-on-select"

docs/src/pages/components/autocomplete/Playground.tsx

@@ -15,14 +15,6 @@ export default function Playground() {
 
   return (
     <div style={{ width: 300 }}>
-      <Autocomplete
-        {...defaultProps}
-        id="debug"
-        debug
-        renderInput={(params) => (
-          <TextField {...params} label="debug" margin="normal" />
-        )}
-      />
       <Autocomplete
         {...defaultProps}
         id="disable-close-on-select"

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -263,6 +263,29 @@ const classes = makeStyles(theme => ({
   +import useAutoComplete from '@material-ui/core/useAutocomplete';
   ```
 
+- Remove `debug` prop. There are a couple of simpler alternatives: `open={true}`, Chrome devtools ["Emulate focused"](https://twitter.com/sulco/status/1305841873945272321), or React devtools prop setter.
+- `renderOption` should now return the full DOM structure of the option.
+  It makes customizations easier. You can recover from the change with:
+
+  ```diff
+  <Autocomplete
+  - renderOption={(option, { selected }) => (
+  -   <React.Fragment>
+  + renderOption={(props, option, { selected }) => (
+  +   <li {...props}>
+        <Checkbox
+          icon={icon}
+          checkedIcon={checkedIcon}
+          style={{ marginRight: 8 }}
+          checked={selected}
+        />
+        {option.title}
+  -   </React.Fragment>
+  +   </li>
+    )}
+  />
+  ```
+
 ### Avatar
 
 - Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns:

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

@@ -275,7 +275,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     clearText = 'Clear',
     closeIcon = <CloseIcon fontSize="small" />,
     closeText = 'Close',
-    debug = false,
     defaultValue = props.multiple ? [] : null,
     disableClearable = false,
     disableCloseOnSelect = false,
@@ -600,13 +599,6 @@ Autocomplete.propTypes = {
    * @default 'Close'
    */
   closeText: PropTypes.string,
-  /**
-   * 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.
-   * @default false
-   */
-  debug: PropTypes.bool,
   /**
    * The default input value. Use when the component is not controlled.
    * @default props.multiple ? [] : null

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

@@ -78,13 +78,6 @@ export interface UseAutocompleteProps<
    * The component name that is using this hook. Used for warnings.
    */
   componentName?: string;
-  /**
-   * 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.
-   * @default false
-   */
-  debug?: boolean;
   /**
    * If `true`, the input can't be cleared.
    * @default false

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

@@ -70,7 +70,6 @@ export default function useAutocomplete(props) {
     clearOnBlur = !props.freeSolo,
     clearOnEscape = false,
     componentName = 'useAutocomplete',
-    debug = false,
     defaultValue = props.multiple ? [] : null,
     disableClearable = false,
     disableCloseOnSelect = false,
@@ -805,10 +804,6 @@ export default function useAutocomplete(props) {
     firstFocus.current = true;
     ignoreFocus.current = false;
 
-    if (debug && inputValue !== '') {
-      return;
-    }
-
     if (autoSelect && highlightedIndexRef.current !== -1 && popupOpen) {
       selectNewValue(event, filteredOptions[highlightedIndexRef.current], 'blur');
     } else if (autoSelect && freeSolo && inputValue !== '') {