[FormControl]: Can fullWidth be added to the FormControl context?

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I would like to be able to consume the fullWidth FormControl state prop from the FormControl context in order to have better support for more custom fullWidth behaviors, especially for non-MUI children.

Examples 🌈

https://github.com/mui-org/material-ui/blob/2082679d80db7848cf47187a128a22491bf0b492/packages/material-ui/src/FormControl/FormControl.js#L157

const childContext = {
    adornedStart,
    setAdornedStart,
    color,
    disabled,
    error,
    filled,
    focused,
+   fullWidth,
    hiddenLabel,
    margin: (size === 'small' ? 'dense' : undefined) || margin,
    onBlur: () => {
      setFocused(false);
    },
    onEmpty,
    onFilled,
    onFocus: () => {
      setFocused(true);
    },
    registerEffect,
    required,
    variant,
  };

Seems simple and innocuous to just also add the available fullWidth prop value to the childContext object, which, in turn, gets set as the value of the FormControlContext.Provider.

Then, I could just do something like:

const muiFormControl = useFormControl();
const fcs = formControlState({
  props,
  muiFormControl,
  states: ['disabled', 'error', 'fullWidth']
});

like I can for most other useful FormControl state props, using formControlState, or any other custom reducer I might need.

Without this, I’m basically forced to have a specific Form theme override for each problematic child.

Motivation 🔦

Right now, it’s simply assumed that the FormControl children behave a certain way and that’s not always true for non-MUI children. I’ve run into a fairly specific problem with the way react-select works that would be greatly simplified if I could just reference the value of the parent FormControl’s fullWidth prop and condition my wrapper component styles based off of that to avoid forking the (strange) internal workings of react-select.

Bottom line, is there any harm in just adding fullWidth to the FormControl context? It seems to be a strange outlier, and there doesn’t seem to be an obvious reason to exclude it.

I can do the one-line change if this seems like something that could be done.

[oliviertassinari]

Related: this resonates with an issue we have with the Autocomplete component. The textfied needs to be fullwidth in order for the width of the root element (the textbox and listbox container) to behave correctly. I couldn’t find a good solution.

[EsoterikStare]

Basically, even though it’s not needed by other form components besides the input, the fact that both the FormControl and the input need to do something to support fullWidth makes me believe it should be in the context. That way the input can just respect the context. Thoughts?