[date-picker] fix: prevent input blur on calendar icon click

[DiegoCardoso]

Description

As described on this issue, when the user clicks on the calendar icon when the DatePicker (or, in the case reported by the issue, a DateTimePicker) is inside a GridPro, the editor gets closed. The same do not happen when the clock icon on the TimePicker is clicked.

The issue comes to the fact that when the user clicks on the calendar icon, the input field is briefly blurred, which causes a blur event that is listened by the GridPro and it stops the edit mode of the cell.

This change applies the same code that is used on ComboBox to prevent the blur event from being fired when the user clicks on the toggle button.

Part of vaadin/flow-components#2428

Type of change

• Bugfix
• Feature

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[web-padawan]

Confirmed that there is no more blur event on toggle button click 👍

[vaadin-bot]

Hi @DiegoCardoso , this commit cannot be picked to 22.0 by this bot, can you take a look and pick it manually?
Error Message: Error: Command failed: git cherry-pick d5f2ee9
error: could not apply d5f2ee9... fix: prevent input blur on calendar icon click (#3398)
hint: after resolving the conflicts, mark the corrected paths
hint: with 'git add ' or 'git rm '
hint: and commit the result with 'git commit'

[tomivirkki]

Could this be tested with sendMouse?

[web-padawan]

Yes, we could indeed try using sendMouse in such cases (it would probably require adding blur spy instead).

[DiegoCardoso]

I tried to use tap, but had no luck. Even on programmatically calling $0.click() from the devtools didn't work, so it needs to be a proper mouse interaction simulation to be performed here. I wasn't aware of the sendMouse function.

[vaadin-bot]

This ticket/PR has been released with platform 23.0.0.beta2 and is also targeting the upcoming stable 23.0.0 version.