Skip to content
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

Jump to bottom

[MobileDatePicker] Fix calling onOpen when readOnly is true #30561

Merged
merged 3 commits into from
Jan 12, 2022
Merged

[MobileDatePicker] Fix calling onOpen when readOnly is true #30561

merged 3 commits into from
Jan 12, 2022

Conversation

alisasanib
Copy link
Contributor

@alisasanib alisasanib commented Jan 9, 2022 •
edited
Loading

Problem:

  • When the readOnly prop is true, clicking on the MobileDatePicker component opens the date selector

Solution

  • adding a condition to check whether the readOnly is true before calling onOpen function

demo

@mui-pr-bot
Copy link

mui-pr-bot commented Jan 9, 2022 •
edited
Loading

Details of bundle changes

Generated by 🚫 dangerJS against c0c71b0

mnajdova
mnajdova reviewed Jan 11, 2022
View reviewed changes
packages/mui-lab/src/internal/pickers/PureDateInput.tsx Outdated
@@ -145,7 +145,7 @@ export const PureDateInput = React.forwardRef(function PureDateInput(
'aria-readonly': true,
'aria-label': getOpenDialogAriaText(rawValue, utils),
value: inputValue,
onClick: onOpen,
onClick: !props.readOnly ? onOpen : () => {},
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
onClick: !props.readOnly ? onOpen : () => {},
...(!props.readOnly && { onClick: onOpen }),

No need to set onClick at all if readOnly is set.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh yes! Pushed the change. Thanks for the comment

mnajdova
mnajdova approved these changes Jan 12, 2022
View reviewed changes
Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

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

Looks great, thanks for the contribution!

@mnajdova mnajdova merged commit be99402 into mui:master Jan 12, 2022
@oliviertassinari oliviertassinari added the component: date picker This is the name of the generic UI component, not the React module! label Jan 12, 2022
@alisasanib alisasanib deleted the MobileDatePicker/readOnly-prop branch January 26, 2022 13:55
wladimirguerra pushed a commit to wladimirguerra/material-ui that referenced this pull request Feb 2, 2022
@alisasanib @wladimirguerra
[MobileDatePicker] Fix calling onOpen when readOnly is true (mui#30561)
e40bf62
@flaviendelangle flaviendelangle mentioned this pull request Mar 3, 2022
Merged
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mnajdova mnajdova mnajdova approved these changes

Assignees
No one assigned
Labels
component: date picker This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

readOnly MobileDatePicker doesn't work in MUI v5
4 participants
@alisasanib @mui-pr-bot @mnajdova @oliviertassinari