[docs] Refactor Data Grid with Date Pickers example #15992
Conversation
LukasTy
added
docs
|
Deploy preview: https://deploy-preview-15992--material-ui-x.netlify.app/ |
| <InputLabel htmlFor={id} id={inputLabelId} {...InputLabelProps}> | ||
| {label} | ||
| </InputLabel> | ||
| {label != null && label !== '' && ( |
There was a problem hiding this comment.
Aligning with TextField on @mui/material: https://github.com/mui/material-ui/blob/c3f36426ccbb34368b084fd4b3c5ac65cee43b3e/packages/mui-material/src/TextField/TextField.js#L243
@noraleonte was there a reason to always render a label element in Picker's case?
There was a problem hiding this comment.
Not entirely sure 🤔 But only rendering when there is a label prop makes more sense 👍 🙈
| slots={{ textField: WrappedGridEditDateInput }} | ||
| slotProps={{ | ||
| textField: { | ||
| variant: 'standard', |
There was a problem hiding this comment.
Looks like it's doable with slotProps, isn't it smoother and preferred over slots overriding when possible?
There was a problem hiding this comment.
@k-rajat19 Yes, that change aims to solve the exact "problem" of calling inputRef.focus() and not seeing any effect, because the input is a hidden element aimed to store the bound value on the accessible DOM.
We'll see if there are no objections to that approach, given that it could be seen as somewhat "hacky". 🙈
IMHO, we should keep using the autoFocus prop for that particular demo to minimize the code.
If we want to demo editMode="row", the autoFocus should be removed as no explicit field focusing is needed in this mode.
| }, | ||
| }, | ||
| }} | ||
| slotProps={{ textField: { size: 'small' } }} |
There was a problem hiding this comment.
Fix this visual inconsistency. 🙈
| @@ -81,7 +65,20 @@ function GridEditDateCell({ | |||
| value={value} | |||
| autoFocus | |||
| onChange={handleChange} | |||
| slots={{ textField: WrappedGridEditDateInput }} | |||
| slotProps={{ | |||
There was a problem hiding this comment.
Nit: Is there a way to force the "shrink" state for the floating label on pickers? If so, would be good to add it for consistency.
Picker field:
Text field:
There was a problem hiding this comment.
Sadly, Pickers with accessibleFieldDOMStructure do not support placeholder prop just like the native date input or React Spectrum fields.
It's not possible, because there is no input element. 🙈
Created from an investigation on #15965 and #15967.