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.

Sign up for GitHub

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

Jump to bottom

feat: enable 1-click switch between pickers when open #6785

Merged
merged 8 commits into from
Aug 12, 2024
Merged

feat: enable 1-click switch between pickers when open #6785

merged 8 commits into from
Aug 12, 2024

Conversation

vursen
Copy link
Contributor

@vursen vursen commented Nov 14, 2023 •
edited
Loading

Description

The PR makes it possible to switch between pickers of date-time-picker with one click when one of them is open. Previously, clicking into the opposite picker while the current picker was open only caused the current picker to close without moving focus to the opposite picker.

Before:

Screen.Recording.2023-11-15.at.9.43.24.mov

After:

Screen.Recording.2023-11-15.at.9.44.06.mov

Fixes #6407

Type of change

  • Bugfix

@vursen vursen changed the title fix: allow switching between pickers with click when any is open fix: enable switching between pickers with click when any is open Nov 14, 2023
@vursen vursen changed the title fix: enable switching between pickers with click when any is open fix: allow switching between pickers with click when any is open Nov 15, 2023
@vursen vursen changed the title fix: allow switching between pickers with click when any is open fix: allow switching between pickers with click when opened Nov 15, 2023
@vursen vursen marked this pull request as ready for review November 15, 2023 08:51
@vursen
Copy link
Contributor Author

vursen commented Nov 15, 2023

Should it be called a fix or feat?

@sonarcloud SonarCloud
Copy link

sonarcloud bot commented Nov 15, 2023

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 2 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@vursen vursen changed the title fix: allow switching between pickers with click when opened fix: allow 1-click switching between pickers when one of them is open Nov 15, 2023
@vursen vursen changed the title fix: allow 1-click switching between pickers when one of them is open fix: allow 1-click switch between pickers when open Nov 15, 2023
web-padawan
web-padawan reviewed Nov 15, 2023
View reviewed changes
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.

There is now a problem with focused and focus-ring attributes not getting removed from vaadin-date-picker after focusing vaadin-time-picker and removing focus:

dtp-focused.mp4

web-padawan
web-padawan reviewed Nov 15, 2023
View reviewed changes
packages/date-time-picker/src/vaadin-date-time-picker.js
@@ -518,16 +519,23 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
this.__dispatchChangeForValue = undefined;
}

__openedChangedEventHandler() {
Copy link
Member

Choose a reason for hiding this comment

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

nit: let's add @private JSDoc annotation.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done.

packages/date-time-picker/test/basic.test.js Outdated
@@ -94,6 +95,50 @@ describe('Basic features', () => {
expect(datePicker.hasAttribute('focused')).to.be.true;
});

it('should not have `pointer-events` by default', () => {
Copy link
Member

Choose a reason for hiding this comment

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

nit: could group new tests into separate suite.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done.

@vursen
Copy link
Contributor Author

vursen commented Nov 17, 2023 •
edited
Loading

I've encountered odd behavior in Safari that negatively impacts the UX of this feature. Certain labels, such as "Birth date and time", cause Safari to activate autofill for the date-time-picker pickers, and for some reason, this autofill prevents the first clicks on the pickers, although focus still moves to them.

Screen.Recording.2023-11-17.at.9.38.59.mov

Having that said, I couldn't reproduce it with the regular date-picker and time-picker. I tried various labels, such as "Birth date", "Date" and so on, but none of them caused Safari to activate autofill.

UPD: Reported in #6817.

@vursen vursen mentioned this pull request Nov 21, 2023
Closed
@vursen vursen changed the title fix: allow 1-click switch between pickers when open [BLOCKED] fix: allow 1-click switch between pickers when open Nov 21, 2023
@vursen vursen changed the title [BLOCKED] fix: allow 1-click switch between pickers when open [BLOCKED] feat: allow 1-click switch between pickers when open Nov 22, 2023
@vursen vursen force-pushed the feat/date-time-picker/allow-switching-between-pickers-when-opened branch from 081ad6b to 19d0439 Compare August 5, 2024 08:38
@vursen vursen changed the title [BLOCKED] feat: allow 1-click switch between pickers when open feat: allow 1-click switch between pickers when open Aug 5, 2024
@vursen vursen changed the title feat: allow 1-click switch between pickers when open feat: enable 1-click switch between pickers when open Aug 5, 2024
@vursen
Copy link
Contributor Author

vursen commented Aug 6, 2024

There is now a problem with focused and focus-ring attributes not getting removed from vaadin-date-picker after focusing vaadin-time-picker and removing focus:

Fixed.

@vursen vursen requested a review from web-padawan August 6, 2024 06:33
@vursen
Copy link
Contributor Author

vursen commented Aug 6, 2024 •
edited
Loading

Certain labels, such as "Birth date and time", cause Safari to activate autofill for the date-time-picker pickers, and for some reason, this autofill prevents the first clicks on the pickers, although focus still moves to them.

Fixed by adding "search" prefix to the id attribute of the date-time-picker inputs. This solution was discovered in #6817.

@vursen vursen force-pushed the feat/date-time-picker/allow-switching-between-pickers-when-opened branch from 8bcc2a6 to fe5f187 Compare August 8, 2024 12:30
@vursen vursen requested review from web-padawan and sissbruecker and removed request for tomivirkki August 8, 2024 12:31
@vursen vursen removed the request for review from ugur-vaadin August 12, 2024 12:27
@vursen vursen removed the request for review from sissbruecker August 12, 2024 12:27
@vursen vursen force-pushed the feat/date-time-picker/allow-switching-between-pickers-when-opened branch from fe5f187 to e08f07c Compare August 12, 2024 12:28
@sonarcloud SonarCloud
Copy link

sonarcloud bot commented Aug 12, 2024

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

@vursen vursen merged commit e08a6e5 into main Aug 12, 2024
9 checks passed
@vursen vursen deleted the feat/date-time-picker/allow-switching-between-pickers-when-opened branch August 12, 2024 13:18
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 24.5.0.alpha10 and is also targeting the upcoming stable 24.5.0 version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@web-padawan web-padawan web-padawan approved these changes

Assignees
No one assigned
Labels
prerelease version for Vaadin 24.5.0 Released with Vaadin 24.5.0.alpha10
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[date-time-picker] Allow clicking into the opposite picker when one of them is open [2 days]
3 participants
@vursen @vaadin-bot @web-padawan