[DateTimePicker] crashes with hooks-out-order error from React
See original GitHub issue- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
When I implement a DateTimePicker that can be set to read-only (not open the dialog) or editable dynamically like it is done here, setting the open
property dynamically will cause an error like this:
Warning: React has detected a change in the order of Hooks called by PickerWithState. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks
Previous render Next render
------------------------------------------------------
1. useContext useContext
2. useContext useContext
3. useState useCallback
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
in PickerWithState (at App.tsx:14)
in MuiPickersUtilsProvider (at App.tsx:40)
in div (at App.tsx:28)
in App (at src/index.tsx:7)
Expected Behavior 🤔
The DateTimePicker component should just be re-rendered as read-only or not. It would be great if there was a readOnly
prop in the component out of the box.
Steps to Reproduce 🕹
Setup in a Sandbox here: https://codesandbox.io/embed/materialui-readonly-datepicker-klttf
Steps:
- Click the checkbox
- See Console Errors
- If you want, comment out the code that “crashes” and uncomment the one that doesn’t.
- It will work as expected in that scenario.
Alternatively, clone this repo: https://github.com/agonzalezjr/materialui-readonly-datepicker (it’s just a create-react-app ... --typescript
with MaterialUI
installed and App.tsx
modified to reproduce the issue.
npm i
npm run start
In the main web page, click the checkbox.
Context 🔦
A DateTimePicker
that can be set to read-only dynamically. It would be great if there was a readOnly
prop in the component out of the box.
Your Environment 🌎
Tech | Version |
---|---|
Material-UI | v4.4.0 |
React | v16.9.0 |
Browser | Chrome v76.0.3809.132 |
TypeScript | v3.5.31 |
@material-ui/pickers | v3.2.5 |
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (2 by maintainers)
Top GitHub Comments
You must not change open property to undefined dynamically. If you need to - please implement your own state for open prop.
Ok, that works! Thank you so much!
I have updated the sandbox with the fixed code https://codesandbox.io/s/materialui-readonly-datepicker-klttf