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

cloudscape-design · Jan 15, 2025 · deb8ce1 · deb8ce1
1 parent 8b9979b
commit deb8ce1
Show file tree

Hide file tree

Showing 4 changed files with 1 addition and 9 deletions.
diff --git a/src/date-picker/index.tsx b/src/date-picker/index.tsx
@@ -168,11 +168,6 @@ const DatePicker = React.forwardRef(
 
     baseProps.className = clsx(baseProps.className, styles.root, styles['date-picker-container']);
 
-    const handleMouseDown = (event: React.MouseEvent) => {
-      // prevent currently focused element from losing it
-      event.preventDefault();
-    };
-
     return (
       <div {...baseProps} ref={mergedRef} onKeyDown={!disabled && !readOnly ? onWrapperKeyDownHandler : undefined}>
         {disabled || readOnly ? (
@@ -183,7 +178,6 @@ const DatePicker = React.forwardRef(
             stretchHeight={true}
             open={isDropDownOpen}
             onDropdownClose={onDropdownCloseHandler}
-            onMouseDown={handleMouseDown}
             trigger={trigger}
             expandToViewport={expandToViewport}
             scrollable={false}

diff --git a/src/date-range-picker/styles.scss b/src/date-range-picker/styles.scss
@@ -131,7 +131,6 @@ $calendar-header-color: awsui.$color-text-body-default;
 }
 
 .label {
-  user-select: text;
   cursor: default;
 }
 
@@ -173,7 +172,6 @@ $calendar-header-color: awsui.$color-text-body-default;
 }
 
 .dropdown-content {
-  user-select: text;
   background-color: awsui.$color-background-container-content;
   inline-size: calc(2 * #{$calendar-grid-width} + #{awsui.$space-xs} + 2 * #{awsui.$space-l});
 

diff --git a/src/internal/components/dropdown/styles.scss b/src/internal/components/dropdown/styles.scss
@@ -23,7 +23,6 @@
   display: none;
   // Needs to be higher than a global navigation element
   z-index: 2000;
-  user-select: none;
   transform-origin: top;
 
   // When used in portal we need z-index to be higher than modal's

diff --git a/src/internal/components/options-list/styles.scss b/src/internal/components/options-list/styles.scss
@@ -23,6 +23,7 @@
   border-start-end-radius: awsui.$border-radius-dropdown;
   border-end-start-radius: awsui.$border-radius-dropdown;
   border-end-end-radius: awsui.$border-radius-dropdown;
+  user-select: none;
 
   &-embedded {
     border-start-start-radius: 0px;