How to fix react-day-picker flickering hover state between mouseenter and mouseleave
- By : Mydatahack
- Category : Front-End, Web Technologies
- Tags: Front End, React, react-day-picker
I had an issue with react-day-picker flickering hover state between mouseenter and mouseleave when the cursor was on the edge of the day I was trying to select. This is not a bug in the library. It was the custom style I added to the hover state that was causing the issue. In my case, I had to override border-radius of the .DayPicker-Day element.
This fixed my issue. The fix is so specific to the component I was working on because I overrode the default style. If you’re stuck with this issue, it’s worth a try.
.DayPicker-wrapper .DayPicker-Body .DayPicker-Day { border-radius: 0px; }