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

fix: Allow text selection in date picker and date range picker #3181

Merged
merged 2 commits into from
Jan 15, 2025

Conversation

jperals
Copy link
Member

@jperals jperals commented Jan 10, 2025

Description

Issue: AWSUI-60182

In the case of dropdowns that contain only a list of selectable options (autosuggest, button dropdown, multiselect, select) it makes sense to disable text selection, but not necessarily for anything that the dropdown may contain, and in particular not for date pickers and date range pickers, where this is having undesired side effects. Therefore moving user-select: none from the dropdown component down to the options list component.

How has this been tested?

  • Preparing visual regression tests
  • Manually tested:
    • Text is selectable in date picker and date ranger picker
    • Double-clicking previous and next buttons in date picker or date range picker does not have unexpected side effects
    • Text is not selectable in autosuggest, button dropdown, multiselect, select
Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

Copy link

codecov bot commented Jan 10, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.41%. Comparing base (67c06fa) to head (961f522).
Report is 11 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff            @@
##             main    #3181    +/-   ##
========================================
  Coverage   96.40%   96.41%            
========================================
  Files         784      784            
  Lines       22144    22142     -2     
  Branches     7191     7594   +403     
========================================
- Hits        21349    21348     -1     
+ Misses        788      787     -1     
  Partials        7        7            

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@@ -168,11 +168,6 @@ const DatePicker = React.forwardRef(

baseProps.className = clsx(baseProps.className, styles.root, styles['date-picker-container']);

const handleMouseDown = (event: React.MouseEvent) => {
Copy link
Member Author

Choose a reason for hiding this comment

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

This was preventing text selection in date picker even after removing user-select: none from the dropdown.

It was introduced 3.5 years ago in CR-49510605 with the justification to prevent an undesired focus ring from appearing when clicking the calendar, but I can't reproduce this today.

@@ -131,7 +131,6 @@ $calendar-header-color: awsui.$color-text-body-default;
}

.label {
user-select: text;
Copy link
Member Author

Choose a reason for hiding this comment

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

These two rules to override the parent's behavior are not necessary anymore

@jperals jperals changed the title fix: Refine text selection behavior in calendar-related components fix: Allow text selection behavior in date picker and date range picker Jan 10, 2025
@jperals jperals changed the title fix: Allow text selection behavior in date picker and date range picker fix: Allow text selection in date picker and date range picker Jan 10, 2025
@jperals jperals marked this pull request as ready for review January 10, 2025 15:02
@jperals jperals requested a review from a team as a code owner January 10, 2025 15:02
@jperals jperals requested review from pan-kot and removed request for a team January 10, 2025 15:02
@jperals jperals enabled auto-merge January 13, 2025 11:24
@jperals jperals added this pull request to the merge queue Jan 15, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 15, 2025
@jperals jperals added this pull request to the merge queue Jan 15, 2025
Merged via the queue into main with commit deb8ce1 Jan 15, 2025
44 checks passed
@jperals jperals deleted the fix/date-components-text-selection branch January 15, 2025 15:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants