Merge pull request #2460 from teamleadercrm/FRAF-1154-v5

DatePickerInput improvements

CHANGELOG.md

@@ -12,6 +12,12 @@
 
 ### Dependency updates
 
+## [17.1.0] - 2022-11-22
+
+### Changed
+
+- `DatePickerInput`: Used proper cursor and added ability to close DatePicker on ESC and ENTER key ([@qubis741](https://github.com/qubis741)) in ([#2460](https://github.com/teamleadercrm/ui/pull/2460))
+
 ## [17.0.4] - 2022-11-22
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "17.0.4",
+  "version": "17.0.5",
   "author": "Teamleader <development@teamleader.eu>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/datepicker/DatePickerInput.tsx

@@ -1,8 +1,9 @@
 import { IconCalendarSmallOutline, IconCloseBadgedSmallFilled } from '@teamleader/ui-icons';
-import React, { ReactNode, useCallback, useEffect, useState } from 'react';
+import cx from 'classnames';
+import React, { KeyboardEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { DayPickerProps as ReactDayPickerProps, Modifier } from 'react-day-picker';
 import DatePicker from '.';
-import { SIZES } from '../../constants';
+import { KEY, SIZES } from '../../constants';
 import Box, { pickBoxProps } from '../box';
 import { BoxProps } from '../box/Box';
 import Icon from '../icon';
@@ -97,7 +98,7 @@ function DatePickerInput<IsTypeable extends boolean = true>({
 
     return customFormatDate(date, locale);
   };
-
+  const inputRef = useRef<HTMLInputElement>(null);
   const [isPopoverActive, setIsPopoverActive] = useState(false);
   const [popoverAnchorEl, setPopoverAnchorEl] = useState<Element | null>(null);
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(
@@ -242,11 +243,20 @@ function DatePickerInput<IsTypeable extends boolean = true>({
     ) : null;
   };
 
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === KEY.Escape || event.key === KEY.Enter) {
+      event.stopPropagation();
+      inputRef.current?.blur();
+      handlePopoverClose();
+    }
+  };
+
   const boxProps = pickBoxProps(others);
   const internalError = displayError ? errorText || true : false;
   return (
     <Box className={className} {...boxProps}>
       <Input
+        ref={inputRef}
         inverse={inverse}
         prefix={renderIcon()}
         suffix={renderClearIcon()}
@@ -258,9 +268,10 @@ function DatePickerInput<IsTypeable extends boolean = true>({
         onClick={handleInputClick}
         onFocus={handleInputFocus}
         onBlur={handleInputBlur}
-        className={theme['date-picker-input']}
+        className={cx({ [theme['date-picker-input__non-typeable']]: !typeable })}
         value={inputValue}
         onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
       />
       <Popover
         active={isPopoverActive}

src/components/datepicker/datePickerInput.stories.tsx

@@ -103,6 +103,7 @@ export const inputSingleDateWithoutTyping: ComponentStory<typeof DatePickerInput
       size="medium"
       onChange={handleOnChange}
       selectedDate={preSelectedDate}
+      typeable={false}
     />
   );
 };

src/components/datepicker/theme.css

@@ -18,7 +18,7 @@
 .date-picker {
   display: flex;
 
-  &-input {
+  &-input__non-typeable {
     input {
       cursor: default;
     }