wrong height on month transitions

[Karine91]

react-dates version
react-dates@21.8.0

Describe the bug
when doing month navigation the height of months is incorrect, dates of last week are truncated

Source code (including props configuration)
See example here https://codesandbox.io/s/tender-payne-ynvlgl?file=/src/App.js

Screenshots/Gifs

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome
• Version 107.0.5304.110 (Official Build) (x86_64)

Is the issue reproducible in Storybook?
issue reproducible in storybook if run locally but not in published storybook version

[romakh-i]

@Karine91

I have investigated this issue and found that the problem is with duplicate subscription for transitionend event.
Using React v17 - everything works fine, but using React v18 - it is broken, that's why in storybook there is no such issue.

So to workaround this you can downgrade to React v17, either set prop transitionDuration={0} or add this piece of code, which will prevent firing event twice:

useEffect(() => {
  const grid = document.getElementsByClassName('CalendarMonthGrid')[0];

  if (grid) {
    grid.ontransitionend = (e) => {
      e.stopPropagation();
    };
  }
}, [focusedInput]);

[ScavengerRat]

Same problem with React v18.2.0.
@romakh-i, both solutions works for me.

[Karine91]

@romakh-i Thanks