Add 'Esc' hotkey behavior on Filter and Sorts dropdown (#1622)

* fix esc key

* add changes

* add changes

* add changes

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 && (

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>
   );
 };

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}

front/src/modules/ui/view-bar/types/FiltersHotkeyScope.ts

@@ -1,3 +1,4 @@
 export enum FiltersHotkeyScope {
   FilterDropdownButton = 'filter-dropdown-button',
+  SortDropdownButton = 'sort-dropdown-button',
 }