[docs] Fix clearing, layout shift, and prop leak in Pickers demos#23191
Merged
LukasTy merged 5 commits intoJul 22, 2026
Conversation
Two fixes in the Pickers documentation demos: - The Pickers overview "Enter your birthday" DateField used a controlled `value` with no `onChange`, which made the clearable clear button a no-op. Switch to `defaultValue` (uncontrolled) so clearing works, matching the sibling demos. - The custom Button field demos spread `forwardedProps` from `useSplitFieldProps` onto a Material `<Button>`. Those props include `slots`, `slotProps` and `inputRef`, which target the default text field, so `slotProps` and `inputRef` leaked onto the DOM `<button>` and triggered React "does not recognize the prop" warnings. Destructure them out before spreading. Applies to the overview PickerButton demo and the canonical behavior-button custom-field examples. Co-Authored-By: Claude Opus 4.8 <[email protected]>
Deploy previewBundle size
Check out the code infra dashboard for more information about this PR. |
LukasTy
added
type: bug
`DatePickerFieldProps` / `DateRangePickerFieldProps` do not type `slots`, `slotProps` and `inputRef` (the picker forwards them at runtime for the default text field), so destructuring them out of `forwardedProps` did not compile. Cast to add the optional keys before stripping them. Co-Authored-By: Claude Opus 4.8 <[email protected]>
Type the forwarded `slots` / `slotProps` / `inputRef` on the custom Button field components with a prop-type intersection (`Pick<DateFieldProps, ...>`, and `SingleInputDateRangeFieldProps` for the range demo) rather than casting `forwardedProps` in the body. Same runtime behavior, cleaner and cast-free. Co-Authored-By: Claude Opus 4.8 <[email protected]>
The birthday card had `maxWidth` but no fixed `width`, so it shrink-to-fit its content. Clearing the field unmounts the clear button, which narrowed the card - and because the card's content drove the right column width, the whole column (including the clock card above it) shifted. Use a fixed `width` so the card stays a constant size. Co-Authored-By: Claude Opus 4.8 <[email protected]>
LukasTy
changed the title
Keeping the type-only `DateFieldProps` / `SingleInputDateRangeFieldProps` import last means its elision during transpilation no longer leaves a blank line in the middle of the generated `.js` imports. Co-Authored-By: Claude Opus 4.8 <[email protected]>
LukasTy
marked this pull request as ready for review
July 22, 2026 07:07
LukasTy
requested review from
Copilot,
flaviendelangle,
michelengelen and
noraleonte
July 22, 2026 07:07
Member
Author
|
@codex review |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes three user-visible issues in the Pickers overview docs demos: a non-functional clear button caused by an inadvertently controlled DateField, layout shift when clearing due to content-driven sizing, and React console warnings caused by leaking slotProps/inputRef onto a DOM <button> in custom field demos.
Changes:
- Switch the birthday demo
DateFieldfromvaluetodefaultValueso clearing (and typing) works as expected. - Prevent layout shift on clear by pinning the birthday card to a fixed width.
- Avoid leaking field-only props (
slots,slotProps,inputRef) onto<Button>in custom “button field” demos by destructuring them out before spreading.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| docs/src/modules/components/overview/pickers/mainDemo/PickerButton.tsx | Filters out field-only props before spreading onto MUI <Button> to avoid React DOM-prop warnings in the overview demo. |
| docs/src/modules/components/overview/pickers/mainDemo/Birthday.tsx | Makes the field clearable by using defaultValue and prevents layout shift by fixing the card width. |
| docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx | Filters out slots/slotProps/inputRef from forwarded props before spreading onto <Button> in the TS demo. |
| docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.js | Regenerated JS demo reflecting the same prop-filtering fix. |
| docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx | Filters out slots/slotProps/inputRef from forwarded props before spreading onto <Button> in the TS demo. |
| docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js | Regenerated JS demo reflecting the same prop-filtering fix. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Codex Review: Didn't find any major issues. Already looking forward to the next diff. Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
michelengelen
approved these changes
Jul 22, 2026
michelengelen
approved these changes
Jul 22, 2026
michelengelen
approved these changes
Jul 22, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Three fixes to Pickers documentation demos, all surfaced on the Pickers overview page.
Clear button no-op in the birthday demo
The "Enter your birthday"
DateFieldin the Pickers overview main demo was controlled (value={dayjs(...)}) with noonChangeand nodefaultValue. Because a controlled input's value is locked to the prop, theclearableclear button (and manual typing) could never change it, so clicking clear was a no-op. Switched todefaultValueso the field is uncontrolled and clearing works, consistent with the sibling demos (Clock,CustomLayoutRangePicker). The field has been controlled-without-onChangesince it was first written, so this is a long-standing demo bug rather than a recent regression.Layout shift when clearing the birthday field
The birthday
CardusedmaxWidthwith no fixedwidth, so it shrank to fit its content. The field's intrinsic width (which includes theclearableclear button) drove the width of the whole right column, so clearing the field - which unmounts the clear button - narrowed the card and shifted the entire column, including the clock card above it. Pinned the card to a fixedwidthso it stays a constant size.slotProps/inputRefprop leak in the custom Button field demosThe custom Button field spread
forwardedPropsfromuseSplitFieldPropsdirectly onto a Material<Button>.useSplitFieldPropsonly extracts the value/format/validation props intointernalProps; the rest (id,slots,slotProps,inputRef, ...) stays inforwardedPropsfor the default text field. Spreading those onto a<Button>forwardedslotPropsandinputRefdown to the DOM<button>, producingReact does not recognize the ... prop on a DOM elementconsole errors. Typed the forwarded field-only props on the field component (viaPick<DateFieldProps, ...>, andSingleInputDateRangeFieldPropsfor the range demo) and destructured them out before spreading. This affected the overviewPickerButtondemo and the canonicalbehavior-buttoncustom-field examples that users copy from.Verification
Reproduced both field bugs in jsdom: the buggy Button pattern emits 2 warnings (
slotProps,inputRef), the fixed pattern emits 0; clearing is a no-op withvalueand empties the field withdefaultValue.Confirmed live on the running overview page: the clear button now empties the birthday field, the
does not recognizeconsole errors are gone, and clearing no longer shifts the layout - the birthday card, the clock card, and the Submit button all keep their exact position (measured zero delta before/after clear; without the fix they moved 11px)..jsdemo files regenerated viapnpm docs:typescript:formatted; docs TypeScript, ESLint (no cache) and Prettier all clean.I have followed (at least) the PR section of the contributing guide.
🤖 Generated with Claude Code