Skip to content

[Autocomplete] Fix disabled prop not passed from FormControl #34431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

[Autocomplete] Fix disabled prop not passed from FormControl #34431

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion packages/mui-material/src/Autocomplete/Autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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') {
Copy link
Member

@mnajdova mnajdova Sep 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can use the formControlState helper instead of this. See for example how it is used in the InputBase component. We should also take into account the other properties that the useFormControl provides, like fullWidth and size and include them as well in the formControlState helper as a third argument alongside with the disabled prop.

Overall, the implementation in the InputBase should be a good reference.

Copy link
Author

@FlorianBurgevin FlorianBurgevin Sep 23, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I agree with the helper. @mnajdova

But i'm a bit lost about where i have to use the fcs values.
What about ownerState?
In renderInput ? InputProps ? inputProps?

Maybe we have to pass error and required props to ?

Copy link
Member

@michaldudak michaldudak Dec 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fcs values should be used wherever the supported props are used directly currently. ownerState, renderInput, etc. fields should include fcs fields as well.

if (muiFormControl) {
disabled = muiFormControl.disabled;
} else {
// Default state
disabled = false;
}
}

const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;

Expand Down