react-modern-calendar-datepicker
react-modern-calendar-datepicker copied to clipboard
Kiarash-Z
Ref calendarElement is null causes "Cannot read property 'removeEventListener' of null"
First: Thank you for this awesome Calendar Datepicker!
After updating to React 17 and next.js 10, removing the Calendar Component from DOM causes error "Cannot read property 'removeEventListener' of null" inside the Cleanup function of the useEffect hook in cases when the Ref to the calendarElement is not initialized properly.
As the maintainers didn't respond, I published the fixed version to my npm packages.
You can download and install it using:
npm install --save @hassanmojab/react-modern-calendar-datepicker
Then change all the imports to:
import '@hassanmojab/react-modern-calendar-datepicker/lib/DatePicker.css';
import DatePicker from '@hassanmojab/react-modern-calendar-datepicker';
⚠️ This is a temporary package as a solution just for this issue and won't be developed.
@HassanMojab it works but got warning: index.js:1446 Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering while sliding
@HassanMojab
Thank you bro it worked for me without any warning.
well done!
if get it in github and use it in your project u must change src/calender.js this part of code: useEffect(() => { const handleKeyUp = ({ key }) => { /* istanbul ignore else / if (key === 'Tab') calendarElement.current.classList.remove('-noFocusOutline'); }; calendarElement.current.addEventListener('keyup', handleKeyUp, false); return () => { calendarElement.current.removeEventListener('keyup', handleKeyUp, false); }; }); to::::::::=>=>=>
useEffect(() => { const handleKeyUp = ({ key }) => { /* istanbul ignore else */ if (key === 'Tab') calendarElement.current.classList.remove('-noFocusOutline'); }; if(calendarElement.current.removeEventListener('keyup', handleKeyUp, false)){ calendarElement.current.addEventListener('keyup', handleKeyUp, false);
return () => { calendarElement.current.removeEventListener('keyup', handleKeyUp, false); }; } });
Works for me, too, Thanks, I really appreciate. Sources on GitHub were a bit hard to find: https://github.com/hassanmojab/react-modern-calendar-datepicker because the source code of the original package is referenced from npm. I would like to fork this and do some minor bug fixes as well as solve the display of more months, I need 3 months.
@HassanMojab works great!! Thanks
yes, I have fixed it with this. thanks
Here's the solution: https://github.com/Kiarash-Z/react-modern-calendar-datepicker/issues/284#issuecomment-950307226
@amir04lm26 as you see in the picture, the starting week day is "جمعه". I've already set the locale='fa' but the starting week index does not change. do u have any workaround?
As the maintainers didn't respond, I published the fixed version to my npm packages.
You can download and install it using:
npm install --save @hassanmojab/react-modern-calendar-datepickerThen change all the imports to:
import '@hassanmojab/react-modern-calendar-datepicker/lib/DatePicker.css'; import DatePicker from '@hassanmojab/react-modern-calendar-datepicker';⚠️ This is a temporary package as a solution just for this issue and won't be developed.
hasan jan nejatemoon dadi damet garm
@amir04lm26 as you see in the picture, the starting week day is "جمعه". I've already set the
locale='fa'but the starting week index does not change. do u have any workaround?
please report the bug on my repo if you are assure of it
Warning: J: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
