From 44e1cbcf15c12a6a91dc8292daf2cd7b753d8c46 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Thu, 2 Jan 2020 16:19:00 -0300 Subject: [PATCH 1/2] [Autocomplete] Warn when mixing uncontrolled and controlled --- .../src/useAutocomplete/useAutocomplete.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index e17e10b8a95426..c6a7776371c9fc 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -192,6 +192,25 @@ export default function useAutocomplete(props) { }); const value = isControlled ? valueProp : valueState; + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line react-hooks/rules-of-hooks + React.useEffect(() => { + if (isControlled !== (valueProp != null)) { + console.error( + [ + `Material-UI: A component is changing ${ + isControlled ? 'a ' : 'an un' + }controlled useAutocomplete to be ${isControlled ? 'un' : ''}controlled.`, + 'Elements should not switch from uncontrolled to controlled (or vice versa).', + 'Decide between using a controlled or uncontrolled useAutocomplete ' + + 'element for the lifetime of the component.', + 'More info: https://fb.me/react-controlled-components', + ].join('\n'), + ); + } + }, [valueProp, isControlled]); + } + const { current: isInputValueControlled } = React.useRef(inputValueProp != null); const [inputValueState, setInputValue] = React.useState(''); const inputValue = isInputValueControlled ? inputValueProp : inputValueState; From 111f48fd729df62d0523efd9ea1bb70d5ab2fb65 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Thu, 2 Jan 2020 16:58:58 -0300 Subject: [PATCH 2/2] [Autocomplete] Compare with undefined instead of null --- packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index c6a7776371c9fc..bfa880b3d58ce4 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -195,7 +195,7 @@ export default function useAutocomplete(props) { if (process.env.NODE_ENV !== 'production') { // eslint-disable-next-line react-hooks/rules-of-hooks React.useEffect(() => { - if (isControlled !== (valueProp != null)) { + if (isControlled !== (valueProp !== undefined)) { console.error( [ `Material-UI: A component is changing ${