From d8590bb358128d7601bee879bcace60d38668d8c Mon Sep 17 00:00:00 2001
From: neo773 <62795688+neo773@users.noreply.github.com>
Date: Wed, 20 Sep 2023 15:10:49 +0530
Subject: [PATCH] Add 'Esc' hotkey behavior on Filter and Sorts dropdown
 (#1622)

* fix esc key

* add changes

* add changes

* add changes
---
 .../ui/dropdown/components/DropdownButton.tsx        | 12 +++++++++++-
 .../ui/view-bar/components/SortDropdownButton.tsx    |  5 +++++
 front/src/modules/ui/view-bar/components/ViewBar.tsx |  2 +-
 .../modules/ui/view-bar/types/FiltersHotkeyScope.ts  |  1 +
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/front/src/modules/ui/dropdown/components/DropdownButton.tsx b/front/src/modules/ui/dropdown/components/DropdownButton.tsx
index aae66abc6..cda6da034 100644
--- a/front/src/modules/ui/dropdown/components/DropdownButton.tsx
+++ b/front/src/modules/ui/dropdown/components/DropdownButton.tsx
@@ -3,6 +3,7 @@ import { Keys } from 'react-hotkeys-hook';
 import { flip, offset, Placement, useFloating } from '@floating-ui/react';
 
 import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
@@ -19,7 +20,7 @@ type OwnProps = {
     key: Keys;
     scope: string;
   };
-  dropdownHotkeyScope?: HotkeyScope;
+  dropdownHotkeyScope: HotkeyScope;
   dropdownPlacement?: Placement;
   onClickOutside?: () => void;
   onClose?: () => void;
@@ -67,6 +68,15 @@ export const DropdownButton = ({
     dropdownHotkeyScope,
   });
 
+  useScopedHotkeys(
+    'esc',
+    () => {
+      closeDropdownButton();
+    },
+    dropdownHotkeyScope.scope,
+    [closeDropdownButton],
+  );
+
   return (
     <div ref={containerRef}>
       {hotkey && (
diff --git a/front/src/modules/ui/view-bar/components/SortDropdownButton.tsx b/front/src/modules/ui/view-bar/components/SortDropdownButton.tsx
index f3e70ca72..cd9a8b6c1 100644
--- a/front/src/modules/ui/view-bar/components/SortDropdownButton.tsx
+++ b/front/src/modules/ui/view-bar/components/SortDropdownButton.tsx
@@ -85,6 +85,10 @@ export const SortDropdownButton = ({
     );
   };
 
+  const handleDropdownButtonClose = () => {
+    resetState();
+  };
+
   return (
     <DropdownButton
       dropdownId={SortDropdownId}
@@ -135,6 +139,7 @@ export const SortDropdownButton = ({
           )}
         </StyledDropdownMenu>
       }
+      onClose={handleDropdownButtonClose}
     ></DropdownButton>
   );
 };
diff --git a/front/src/modules/ui/view-bar/components/ViewBar.tsx b/front/src/modules/ui/view-bar/components/ViewBar.tsx
index edeae0ac8..be9550305 100644
--- a/front/src/modules/ui/view-bar/components/ViewBar.tsx
+++ b/front/src/modules/ui/view-bar/components/ViewBar.tsx
@@ -43,7 +43,7 @@ export const ViewBar = ({
             hotkeyScope={{ scope: FiltersHotkeyScope.FilterDropdownButton }}
           />
           <SortDropdownButton
-            hotkeyScope={{ scope: FiltersHotkeyScope.FilterDropdownButton }}
+            hotkeyScope={{ scope: FiltersHotkeyScope.SortDropdownButton }}
             isPrimaryButton
           />
           {optionsDropdownButton}
diff --git a/front/src/modules/ui/view-bar/types/FiltersHotkeyScope.ts b/front/src/modules/ui/view-bar/types/FiltersHotkeyScope.ts
index b2b3ca801..84c5dcbe6 100644
--- a/front/src/modules/ui/view-bar/types/FiltersHotkeyScope.ts
+++ b/front/src/modules/ui/view-bar/types/FiltersHotkeyScope.ts
@@ -1,3 +1,4 @@
 export enum FiltersHotkeyScope {
   FilterDropdownButton = 'filter-dropdown-button',
+  SortDropdownButton = 'sort-dropdown-button',
 }