Ref calendarElement is null causes "Cannot read property 'removeEventListener' of null"

[felixkoch]

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.

[mskarimi]

me too @Kiarash-Z hi There is an update for this bug on react 17?

[seyyed-sina]

same issue here @Kiarash-Z

[barghi]

same issue here

[ramirobg94]

other here

[elin-oh]

same issue

[Adamkaram]

same

[seyyed-sina]

any plan to fix the issue @Kiarash-Z??

[bragayuri]

same

[thegauravthakur]

same

[Hosein-mh]

same issue

[mojabyte]

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.

[thegauravthakur]

@HassanMojab works great!! Thanks

[Hosein-mh]

@HassanMojab it works but got warning: index.js:1446 Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering while sliding

[Mehdi-Momenpoor]

@HassanMojab

Thank you bro it worked for me without any warning.

well done!

[max-oyedele]

@HassanMojab It works. Thanks a lot.

[farhadddvarjavand]

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); }; } });

[norama]

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.

[wangtiger317]

@HassanMojab works great!! Thanks

yes, I have fixed it with this. thanks

[s10mcow]

+1

[amir04lm26]

Here's the solution: https://github.com/Kiarash-Z/react-modern-calendar-datepicker/issues/284#issuecomment-950307226

[jsina]

@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?

[reza-ya-57]

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.

hasan jan nejatemoon dadi damet garm

[samyarkd]

is there any update for this issue

[amir04lm26]

@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

[sarafiuter]

GRACIAS GRACIAS GRACIAS

[cheelix]

Warning: J: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

[Cow258]

I have updated my forked repository to support React 19.

Can try it out by modify your package.json as follows

{
  "dependencies": {
    "react-modern-calendar-datepicker": "github:Cow258/react-modern-calendar-datepicker#built"
  }
}

or

npm install --save github:Cow258/react-modern-calendar-datepicker#built

yarn add github:Cow258/react-modern-calendar-datepicker#built

pnpm i github:Cow258/react-modern-calendar-datepicker#built