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

[aroncal]

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]

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]

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]

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]

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