feat: add support for blur in input, text area and select on esc

Author: eshankvaish

src/Shared/Components/CustomInput/CustomInput.tsx

@@ -81,6 +81,14 @@ const CustomInput = ({
         endIconButtonConfig?.onClick(event)
     }
 
+    const handleKeyDown: CustomInputProps['onKeyDown'] = (e) => {
+        if (e.key === 'Escape') {
+            inputRef.current.blur()
+        }
+
+        props.onKeyDown?.(e)
+    }
+
     return (
         <FormFieldWrapper
             inputId={name}
@@ -115,6 +123,7 @@ const CustomInput = ({
                     data-testid={name}
                     required={required}
                     onBlur={handleBlur}
+                    onKeyDown={handleKeyDown}
                     type={type}
                     ref={inputRef}
                     className={`${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[size]} ${COMPONENT_SIZE_TYPE_TO_INLINE_PADDING_MAP[size]} ${deriveBorderRadiusAndBorderClassFromConfig({ borderConfig, borderRadiusConfig })} ${endIconButtonConfig ? `custom-input__with-icon-button--${size}` : ''} w-100 dc__overflow-auto`}

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -22,7 +22,7 @@ import {
     Props as ReactSelectProps,
 } from 'react-select'
 import CreatableSelect from 'react-select/creatable'
-import { ReactElement, useCallback, useMemo, useState } from 'react'
+import { ReactElement, useCallback, useMemo, useRef, useState } from 'react'
 import { ComponentSizeType } from '@Shared/constants'
 import { ConditionalWrap } from '@Common/Helper'
 import Tippy from '@tippyjs/react'
@@ -202,7 +202,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     classNamePrefix,
     shouldRenderCustomOptions = false,
     isSearchable,
-    selectRef,
+    selectRef: refFromConsumer,
     shouldMenuAlignRight = false,
     fullWidth = false,
     customSelectedOptionsCount = null,
@@ -223,6 +223,9 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     labelTooltipConfig,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
+    const innerRef = useRef<SelectPickerProps<OptionValue, IsMulti>['selectRef']['current']>(null)
+    const selectRef = refFromConsumer ?? innerRef
+
     const [isFocussed, setIsFocussed] = useState(false)
     const [inputValue, setInputValue] = useState('')
 
@@ -356,6 +359,11 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
         if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
             e.preventDefault()
         }
+
+        if (e.key === 'Escape' && !selectRef.current.props.menuIsOpen) {
+            selectRef.current.blur()
+        }
+
         onKeyDown?.(e)
     }
 

src/Shared/Components/Textarea/Textarea.component.tsx

@@ -114,6 +114,10 @@ const Textarea = ({
     ) => {
         if (event.key === 'Enter' || event.key === 'Escape') {
             event.stopPropagation()
+
+            if (event.key === 'Escape') {
+                textareaRef.current.blur()
+            }
         }
     }