From dd352d06a0d52e7179bde39b392c1908a5c7533e Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 6 Nov 2020 19:29:11 +0100 Subject: [PATCH] [Autocomplete] Remove `debug` in favor of react-devtools (#23377) --- docs/pages/api-docs/autocomplete.md | 1 - .../components/autocomplete/Playground.js | 8 ------- .../components/autocomplete/Playground.tsx | 8 ------- .../pages/guides/migration-v4/migration-v4.md | 23 +++++++++++++++++++ .../src/Autocomplete/Autocomplete.js | 8 ------- .../src/useAutocomplete/useAutocomplete.d.ts | 7 ------ .../src/useAutocomplete/useAutocomplete.js | 5 ---- 7 files changed, 23 insertions(+), 37 deletions(-) diff --git a/docs/pages/api-docs/autocomplete.md b/docs/pages/api-docs/autocomplete.md index fb6ade645950ab..d2ae7f9096ed1a 100644 --- a/docs/pages/api-docs/autocomplete.md +++ b/docs/pages/api-docs/autocomplete.md @@ -39,7 +39,6 @@ The `MuiAutocomplete` name can be used for providing [default props](/customizat | clearText | string | 'Clear' | Override the default text for the *clear* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | | closeIcon | node | <CloseIcon fontSize="small" /> | The icon to display in place of the default close icon. | | closeText | string | 'Close' | Override the default text for the *close popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| debug | bool | false | 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. | | defaultValue | any | props.multiple ? [] : null | The default input value. Use when the component is not controlled. | | disableClearable | bool | false | If `true`, the input can't be cleared. | | disableCloseOnSelect | bool | false | If `true`, the popup won't close when a value is selected. | diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js index d928eb72d90d89..568a7d8f20d14b 100644 --- a/docs/src/pages/components/autocomplete/Playground.js +++ b/docs/src/pages/components/autocomplete/Playground.js @@ -17,14 +17,6 @@ export default function Playground() { return (
- ( - - )} - /> - ( - - )} - /> ({ +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 + ( + - + + renderOption={(props, option, { selected }) => ( + +
  • + + {option.title} + - + +
    • + )} + /> + ``` + ### Avatar - Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns: diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js index de3ec2bf0b1456..209d5f4ddc0864 100644 --- a/packages/material-ui/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui/src/Autocomplete/Autocomplete.js @@ -275,7 +275,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { clearText = 'Clear', closeIcon = , 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 diff --git a/packages/material-ui/src/useAutocomplete/useAutocomplete.d.ts b/packages/material-ui/src/useAutocomplete/useAutocomplete.d.ts index dc7e5ec8ca89b1..0dfea8c7994993 100644 --- a/packages/material-ui/src/useAutocomplete/useAutocomplete.d.ts +++ b/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 diff --git a/packages/material-ui/src/useAutocomplete/useAutocomplete.js b/packages/material-ui/src/useAutocomplete/useAutocomplete.js index 7e7598f853c67f..9ac3d25e9d8f8f 100644 --- a/packages/material-ui/src/useAutocomplete/useAutocomplete.js +++ b/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 !== '') {