From 54990e4eb0a5efcf227cef5cb034c0ac71bd782d Mon Sep 17 00:00:00 2001
From: Gaic4o <alstntorl@naver.com>
Date: Fri, 24 May 2024 00:53:58 +0900
Subject: [PATCH] fix(hooks): resolve type error in onKeyDown event handler

---
 .changeset/real-turkeys-sparkle.md           |  5 +++++
 packages/hooks/use-aria-menu/src/use-menu.ts | 13 ++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/real-turkeys-sparkle.md

diff --git a/.changeset/real-turkeys-sparkle.md b/.changeset/real-turkeys-sparkle.md
new file mode 100644
index 0000000000..9ce4d4cc34
--- /dev/null
+++ b/.changeset/real-turkeys-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/use-aria-menu": major
+---
+
+WHAT: Fixed a type error in the onKeyDown event handler for the menu component. WHY: The current implementation uses @ts-ignore to suppress type errors in the onKeyDown event handler. This may result in reduced type safety.
diff --git a/packages/hooks/use-aria-menu/src/use-menu.ts b/packages/hooks/use-aria-menu/src/use-menu.ts
index 2dad54f1aa..ff551c1341 100644
--- a/packages/hooks/use-aria-menu/src/use-menu.ts
+++ b/packages/hooks/use-aria-menu/src/use-menu.ts
@@ -2,7 +2,7 @@
 import {AriaMenuProps} from "@react-types/menu";
 import {DOMAttributes, Key, KeyboardDelegate, KeyboardEvents} from "@react-types/shared";
 import {filterDOMProps, mergeProps} from "@react-aria/utils";
-import {RefObject} from "react";
+import {RefObject, KeyboardEvent as ReactKeyboardEvent} from "react";
 import {TreeState} from "@react-stately/tree";
 import {useSelectableList} from "@react-aria/selection";
 
@@ -46,7 +46,6 @@ export function useMenu<T>(
     console.warn("An aria-label or aria-labelledby prop is required for accessibility.");
   }
 
-  // @ts-ignore
   let domProps = filterDOMProps(props, {labelable: true});
   let {listProps} = useSelectableList({
     ...otherProps,
@@ -70,12 +69,12 @@ export function useMenu<T>(
       {
         role: "menu",
         ...listProps,
-        // @ts-ignore
-        onKeyDown: (e) => {
+        onKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => {
           // don't clear the menu selected keys if the user is presses escape since escape closes the menu
-          if (e.key !== "Escape") {
-            // @ts-ignore
-            listProps.onKeyDown(e);
+          if (event.key !== "Escape") {
+            if (listProps.onKeyDown) {
+              listProps.onKeyDown(event);
+            }
           }
         },
       },