React-date-picker: React Fit memory leak

[aladinflux]

There's an issue that react-fit is causing making the page crash. I couldn't pin the problem yet, but I submitted the issue anyway in case someone else is experiencing this problem. I'll post an update once I find the issue.

I'm using entry.nostylewith custom css from styled-jsx.

[HARIKSREEE]

I also got the issue. . I got the issue when the calendar is overflowing at the window bottom.
the error is given below,
<Fit />'s child needed to have its height decreased to 188.3125px.

@aladinflux
Did you get any solution for that?

[aladinflux]

Not yet @HARIKSREEE. I still didn't have time to look into it. I'll update here once I find something.

[moecantplay]

I'm having a similar issue like @HARIKSREEE

<Fit />'s child needed to have its width decreased to 310px

[binarykitchen]

And me too, seeing this warning <Fit />'s child needed to have its height decreased to 0px.

[pkonieczniak]

I noticed the same problem. <Fit />'s child needed to have its width decreased to 262px
In our application, we have a sidebar form which is also a modal.
When the DatePicker component is the last child after selecting the date the app is frozen.

[pkonieczniak]

In my case, the issue was that we have custom datePicker styles

/*
...
... some date-picker styles
*/

// This style is added to show always the calendar under the input field
.react-date-picker__calendar.react-date-picker__calendar--open {
  top: 100% !important;
}

In some cases, input was placed at the bottom, and after clicking on input the calendar was open and a scrollbar was added dynamically, then the screen was frozen.

The simplest workaround in my case was adding the calendarClassName="absolute" to DatePicker component

[jtieu-r7]

I'm seeing errors similar to what's been posted in my react testing library tests. Applying calendarClassName="absolute" doesn't do anything. Anybody have any other ideas on how to fix this?

[pkonieczniak]

Applying calendarClassName="absolute" doesn't do anything.

In my case, "absolute" was a global utility CSS class defined across the project.

.absolute { position: absolute ;}

You can also make a similar helper class or try to set inline styles on the component.

[wmcg]

Thanks @pkonieczniak this fixed my problem after a frustrating debugging session.