feat: add support for command + enter in filter select picker

Author: eshankvaish

src/Common/Hooks/UseRegisterShortcut/types.ts

@@ -26,7 +26,7 @@ export const KEYBOARD_KEYS_MAP = {
     R: 'R',
     K: 'K',
     Escape: 'Escape',
-    Enter: 'Enter',
+    Enter: '↩',
 } as const
 
 export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP

src/Shared/Components/SelectPicker/FilterSelectPicker.tsx

@@ -6,10 +6,15 @@ import { useEffect, useMemo, useState } from 'react'
 import { ReactComponent as ICFilter } from '@Icons/ic-filter.svg'
 import { ReactComponent as ICFilterApplied } from '@Icons/ic-filter-applied.svg'
 import { ComponentSizeType } from '@Shared/constants'
+import { useRegisterShortcut, UseRegisterShortcutProvider } from '@Common/Hooks'
+import { IS_PLATFORM_MAC_OS } from '@Common/Constants'
+import { SupportedKeyboardKeysType } from '@Common/Hooks/UseRegisterShortcut/types'
 import SelectPicker from './SelectPicker.component'
 import { FilterSelectPickerProps, SelectPickerOptionType, SelectPickerProps } from './type'
 import { Button } from '../Button'
 
+const APPLY_FILTER_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = [IS_PLATFORM_MAC_OS ? 'Meta' : 'Control', 'Enter']
+
 const FilterSelectPicker = ({
     appliedFilterOptions,
     handleApplyFilter,
@@ -23,6 +28,8 @@ const FilterSelectPicker = ({
         structuredClone(appliedFilterOptions ?? []),
     )
 
+    const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
+
     const appliedFiltersCount = appliedFilterOptions?.length ?? 0
 
     useEffect(() => {
@@ -52,24 +59,39 @@ const FilterSelectPicker = ({
         setSelectedOptions(structuredClone(appliedFilterOptions ?? []))
     }
 
-    const renderApplyButton = () => {
-        const handleApplyClick = () => {
-            handleApplyFilter(selectedOptions)
-            closeMenu()
+    const handleApplyClick = () => {
+        handleApplyFilter(selectedOptions)
+        closeMenu()
+    }
+
+    const renderApplyButton = () => (
+        <div className="p-8 dc__border-top-n1">
+            <Button
+                text="Apply"
+                dataTestId="filter-select-picker-apply"
+                onClick={handleApplyClick}
+                size={ComponentSizeType.small}
+                fullWidth
+                showTooltip
+                tooltipProps={{
+                    shortcutKeyCombo: {
+                        text: 'Apply filter',
+                        combo: APPLY_FILTER_SHORTCUT_KEYS,
+                    },
+                }}
+            />
+        </div>
+    )
+
+    useEffect(() => {
+        if (isMenuOpen) {
+            registerShortcut({ keys: APPLY_FILTER_SHORTCUT_KEYS, callback: handleApplyClick })
         }
 
-        return (
-            <div className="p-8 dc__border-top-n1">
-                <Button
-                    text="Apply"
-                    dataTestId="filter-select-picker-apply"
-                    onClick={handleApplyClick}
-                    size={ComponentSizeType.small}
-                    fullWidth
-                />
-            </div>
-        )
-    }
+        return () => {
+            unregisterShortcut(APPLY_FILTER_SHORTCUT_KEYS)
+        }
+    }, [handleApplyClick, isMenuOpen])
 
     return (
         <div className="dc__mxw-250">
@@ -96,4 +118,10 @@ const FilterSelectPicker = ({
     )
 }
 
-export default FilterSelectPicker
+const FilterSelectPickerWrapper = (props: FilterSelectPickerProps) => (
+    <UseRegisterShortcutProvider ignoreTags={[]}>
+        <FilterSelectPicker {...props} />
+    </UseRegisterShortcutProvider>
+)
+
+export default FilterSelectPickerWrapper

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

@@ -14,7 +14,14 @@
  * limitations under the License.
  */
 
-import { GroupHeadingProps, MultiValueProps, OptionProps, ValueContainerProps, MenuPlacement } from 'react-select'
+import {
+    GroupHeadingProps,
+    MultiValueProps,
+    OptionProps,
+    ValueContainerProps,
+    MenuPlacement,
+    Props as ReactSelectProps,
+} from 'react-select'
 import CreatableSelect from 'react-select/creatable'
 import { ReactElement, useCallback, useMemo } from 'react'
 
@@ -308,6 +315,13 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
         }
     }
 
+    const handleKeyDown: ReactSelectProps['onKeyDown'] = (e) => {
+        // Prevent the option from being selected if meta or control key is pressed
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+            e.preventDefault()
+        }
+    }
+
     const commonProps = useMemo(
         () => ({
             name: name || inputId,
@@ -392,6 +406,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                             onInputChange={onInputChange}
                             icon={icon}
                             showSelectedOptionIcon={shouldShowSelectedOptionIcon}
+                            onKeyDown={handleKeyDown}
                         />
                     </div>
                 </ConditionalWrap>