Safari/iOS: hover background when unselecting a day

jasondainter commented 4 months ago

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

gpbl commented 4 months ago

@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.

gpbl commented 4 months ago

Looks like the fix is to include the over style inside @media (hover: hover) {.

jasondainter commented 4 months ago

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!

gpbl commented 1 month ago

Closing this as we are removing the hover effect in v9: see https://react-day-picker.js.org/next/using-daypicker/styling

gpbl / react-day-picker