React-dates: Object doesn't support property or method 'blur'

[kumarharsh]

This occurs on Edge if an SVG element is the document.activeElement. This library tries to call document.activeElement.blur() and SVG elements don't have a blur property defined in Edge, causing an error.

[ljharb]

This sounds like both something that is a bug with us and also with edge. Have you filed a bug on chakracore/edge?

[xiaotian-tan]

I tried with react-dates demo site on IE 11, and it definitely has a bug.

The bug appears after version 17.1.1

[majapw]

Huh, I wonder if this is due to the restructuring of the navigation. I think a simple patch would be to check for the blur element. Let me put up a PR.

[majapw]

Yup, okay sorry for the delay! I am working on a fix now. :)

[majapw]

Fixed in v18! :)

[xiaotian-tan]

Yeah! Thanks a lot 👍

[markhaasjes]

I've updated the react-dates library to version 18.1.0 and I still see this issue when clicking on the month navigation "arrow" itself, when clicking on the button it works fine. I've reproduced this issue in IE11 while using BrowserStack.

-- Edited --
I was able to fix it with a workaround, by overriding the css.

.DayPickerNavigation_svg__horizontal {
  pointer-events: none;
}