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

[Felix Koch]

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.

[mohamad sadegh karimi]

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

[Seyed Sina Farjad Pezeshk]

same issue here
@Kiarash-Z

[barghi]

same issue here

[Ramiro Blázquez]

other here

[elin_oh]

same issue

[AhmedKaram]

same

[Seyed Sina Farjad Pezeshk]

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

[Yuri Braga]

same

[Gaurav Thakur]

same

[Hossein Mohamadi]

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.

[Gaurav Thakur]

@hassanmojab works great!! Thanks

[Hossein Mohamadi]

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

[Mehdi]

@hassanmojab

Thank you bro
it worked for me without any warning.

well done!

[Maxim Dymchenko ✨]

@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

[S_10 M]

+1

[Amir]

Here's the solution: #284 (comment)

[Sina Maleki]

@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

[Samyar]

is there any update for this issue

[Amir]

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

[Cowboy Ho]

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