-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
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.
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
[FormControl]: Can fullWidth be added to the FormControl context? #19336
Comments
Thank you for opening this issue and explaining the motivation. Could you list all the form related components that implement the If |
We're very aware of (and excited about!) I'll try and get an audit together for all the fullWidth-compatible components today. Thanks for the response! |
These are all the form-related components which implement a
To me, this seems like a perfectly innocuous addition since there shouldn't be any components looking for or acting on its presence in the context, and this appears to be the case, on cursory inspection of the code. Is there a particular reason this was not originally included in the context? It seems odd that it was excluded while things like Anyways, I'm speculating. Let me know what you think. |
We put things in context if different components in a FormControl need the same "prop". This doesn't seem to be the case for e.g. Could you share your code? Maybe I'm missing some places where you have a single FormControl but multiple Material-UI components that use fullWidth. |
Sorry, I can't share my code, but I can provide some pseudo-code. I think I understand what you're saying. The problem I think this solves is that const foo = () => {
return (
<FormControl fullWidth>
<InputLabel>State</InputLabel>
<Input />
<FormHelperText>Please choose your state of residence</FormHelperText>
</FormControl>
)
} But, when using a custom form component like const foo = () => {
return (
<FormControl fullWidth>
<InputLabel>State</InputLabel>
<CustomSelect fullWidth />
<FormHelperText>Please choose your state of residence</FormHelperText>
</FormControl>
)
} It would be great if a custom form component could be made to behave just like a MUI form component by consuming the Just to be totally clear, I want to be able to do this: const foo = () => {
return (
<FormControl fullWidth>
<InputLabel>State</InputLabel>
<CustomSelect />
<FormHelperText>Please choose your state of residence</FormHelperText>
</FormControl>
)
} |
So your current code looks like const foo = () => {
return (
<FormControl>
<InputLabel>State</InputLabel>
<CustomSelect fullWidth />
<FormHelperText>Please choose your state of residence</FormHelperText>
</FormControl>
)
} ? |
No, that code example is not quite right. Sorry, this is hard to describe well. Right now, due to the styles and structure of the underlying library, the only way for a consumer of our custom component to implement const foo = () => {
return (
<FormControl fullWidth>
<InputLabel>State</InputLabel>
<CustomSelect fullWidth />
<FormHelperText>Please choose your state of residence</FormHelperText>
</FormControl>
)
}
By simply adding The goal is to be able to provide a custom form component that can be implemented in the same way any other MUI form component can be (i.e, const foo = () => {
return (
<FormControl fullWidth>
<InputLabel>State</InputLabel>
<CustomSelect />
<FormHelperText>Please choose your state of residence</FormHelperText>
</FormControl>
)
} My hope is that it's a very simple and low-risk enhancement that would enable people like me to build stuff that behaves exactly as you'd expect inside of a Again, the only obstacle I can see to that being a reality is the absence of |
Basically, even though it’s not needed by other form components besides the input, the fact that both the |
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. |
What if we turn the input full-width prop on by default if there is a form control? |
Gotcha, I missed that one. In that case we should move it into context. |
@oliviertassinari, Turning on full-width when in a FormControl (by evaluating whether the context is defined or not) is part of what we have done internally to support this in other components that are a little less quirky than I can add |
This was merged in, so I'm closing this issue. Cheers! |
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 thechildContext
object, which, in turn, gets set as the value of theFormControlContext.Provider
.Then, I could just do something like:
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 ofreact-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.
The text was updated successfully, but these errors were encountered: