diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 9de58b04320b93..014b298e99e86b 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -20,6 +20,7 @@ import filledInputClasses from '../FilledInput/filledInputClasses'; import ClearIcon from '../internal/svg-icons/Close'; import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown'; import useThemeProps from '../styles/useThemeProps'; +import useFormControl from "../FormControl/useFormControl"; import styled from '../styles/styled'; import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses'; import capitalize from '../utils/capitalize'; @@ -380,7 +381,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { defaultValue = props.multiple ? [] : null, disableClearable = false, disableCloseOnSelect = false, - disabled = false, + disabled: disabledProp, disabledItemsFocusable = false, disableListWrap = false, disablePortal = false, @@ -450,6 +451,19 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { groupedOptions, } = useAutocomplete({ ...props, componentName: 'Autocomplete' }); + const muiFormControl = useFormControl(); + + let disabled = disabledProp; + + if (typeof disabled === 'undefined') { + if (muiFormControl) { + disabled = muiFormControl.disabled; + } else { + // Default state + disabled = false; + } + } + const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly; const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;