Safari/iOS: hover background when unselecting a day
jasondainter opened this issue · comments
Description
When selecting the day of the month, then unselecting in a mobile browser (tested in chrome on IOS) it goes from
Selected...
To Unselected (pressing the date again)
But as you can see (this was tested via the demo on https://react-day-picker.js.org/start directly) you get this blue highlight remaining
This is quite confusing UX as you would expect no selection at all (it looks like it is still selected when it isnt)
Seems fine on Desktop.
Is there any way to turn that off?
Expected Behavior
Expect the lighter blue circle to dissapear
Actual Behavior
Lighter blue circle remains after clearing selection.
Steps to Reproduce
- Step one - https://react-day-picker.js.org/start
- Step two - Press a date on mobile (ios/chrome)
- Step three - Unpress a date (unselect)
Your Environment
- React version: 18.2.0
- Browser [e.g. chrome, safari]: Chrome
- Version [e.g. 22]: Chrome 122
- Operating System [e.g. iOS, Windows]: iOS 17.3
@jasondainter I see it. It looks like Safari is keeping the :hover style. It seems to be an issue for other people too: https://stackoverflow.com/questions/47802530.
Looks like the fix is to include the over style inside @media (hover: hover) {.
Thanks for quick feedback. in the end I disabled the hover entirely. In my case todays date is highlighted (selected) when the user sees the calendar so I probably get away with this more (eg its more obvious the user has to click a date). would be great to have this fixed in a future version if doable!
Closing this as we are removing the hover effect in v9: see https://react-day-picker.js.org/next/using-daypicker/styling