Clicking on calendar icon fires 'duetFocus' event on Safari, doesn't on Chrome

duetds / date-picker

Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/

https://www.duetds.com

MIT License

1.73k stars 68 forks source link

Clicking on calendar icon fires 'duetFocus' event on Safari, doesn't on Chrome #44

Open aroncal opened 3 years ago

aroncal commented 3 years ago

Describe the bug On Safari, clicking on the calendar icon emits the 'duetFocus' event. I think it happens because the focus goes to the input element.

Expected behavior On Chrome, clicking on the calendar icon doesn't emit the 'duetFocus' event, because focus is given to the calendar overlay as stated on the docs on the "show" method: https://github.com/duetds/date-picker#show--promisevoid

I think datePicker's behavior in Chrome is more suit, because the behavior on Safari is what makes Safari's month selector to show up below the calendar overlay, as described on the folowing closed bug, which doesn't work well along with our date-picker: https://github.com/duetds/date-picker/issues/23#issue-706803329

Desktop (please complete the following information):

OS: Macos
Browser: Safari
Version 13.1.1

Smartphone (please complete the following information):

Device: iPhone Xr
OS: IOS 13.5.1
Browser Safari

WickyNilliams commented 3 years ago

I don't have an ios device to test on. But for me this is behaving as expected, in both safari (v14) and chrome (latest) on mac.

when focus is inside input, and then button is clicked, duetBlur event is emitted
when focus is not inside input, and then button is clicked, duetBlur event is not emitted

Are you seeing something different, or were you not expecting this behaviour?

aroncal commented 3 years ago

Maybe I didn't explain myself well. You can try the difference on desktop too (Safari vs Chrome/Firefox). The test starts with focus NOT inside input element:

On Chrome/Firefox, clicking on calendar icon DOESN'T emit 'duetFocus' event
On Safari, clicking on calendar icon DOES emit 'duetFocus' event

That's what I see differently. For me, the behavior in Chrome is the right one. Clicking on the icon shouldn't focus the input element. The side-effect on Mobile-Safari is that clicking on the icon, shows not only the calendar overlay of the component, but also a native month selector below it.

WickyNilliams commented 3 years ago

I am seeing the same behaviour in both chrome and safari on desktop: duetFocus is only fired when focus moves to the input, and duetBlur is only fired when focus moves from the input.

I am on safari 14 - i wonder if there's some difference there?

aroncal commented 3 years ago

I'm using Safari 13.1.1

So, on your Safari 14, when you click on the calendar icon, 'duetFocus' is not emitted for sure?

I've just tested it and it does, and I think it happens because the icon and the input element overlap, because if I manipulate the input element with the inspector to take 80% of the width of the container, instead of the actual 100%, then this behavior stops happening. Still, the icon and the input also overlap on Chrome/Firefox, there must be some difference in the rendering engine because the icon doesn't fire 'duetFocus'.