Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Feb 6, 2022

Conversation

DiegoCardoso
Copy link
Contributor

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
Copy link

sonarcloud bot commented Feb 4, 2022

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

Copy link
Member

@web-padawan web-padawan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@web-padawan web-padawan removed the request for review from tomivirkki February 6, 2022 11:17
@web-padawan web-padawan merged commit d5f2ee9 into master Feb 6, 2022
@web-padawan web-padawan deleted the fix/date-picker-toggle-button branch February 6, 2022 11:18
@vaadin-bot
Copy link
Collaborator

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'

DiegoCardoso added a commit that referenced this pull request Feb 7, 2022
Co-authored-by: Diego Cardoso <diego@vaadin.com>
@tomivirkki
Copy link
Member

Could this be tested with sendMouse?

@web-padawan
Copy link
Member

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

@DiegoCardoso
Copy link
Contributor Author

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants