From 912562a81c18afeb5987d0d4b9e6977ea3b58f23 Mon Sep 17 00:00:00 2001
From: zernonia <59365435+zernonia@users.noreply.github.com>
Date: Wed, 31 Jan 2024 13:03:43 +0800
Subject: [PATCH] fix(NavigationMenu): input not working in NavigationContent
 (#644)

---
 .../src/NavigationMenu/NavigationMenuContentImpl.vue  |  7 +------
 packages/radix-vue/src/shared/useArrowNavigation.ts   | 11 ++++++++++-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
index 59db523b1..652fc3cc0 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -166,14 +166,9 @@ function handleKeydown(ev: KeyboardEvent) {
     ev,
     document.activeElement as HTMLElement,
     undefined,
-    { itemsArray: candidates, loop: false },
+    { itemsArray: candidates, loop: false, enableIgnoredElement: true },
   )
   newSelectedElement?.focus()
-
-  if (ev.key === 'Enter' || ev.key === 'Escape')
-    return
-  ev.preventDefault()
-  ev.stopPropagation()
 }
 
 function handleDismiss() {
diff --git a/packages/radix-vue/src/shared/useArrowNavigation.ts b/packages/radix-vue/src/shared/useArrowNavigation.ts
index 4806d8fef..6cd98fd94 100644
--- a/packages/radix-vue/src/shared/useArrowNavigation.ts
+++ b/packages/radix-vue/src/shared/useArrowNavigation.ts
@@ -47,6 +47,13 @@ interface ArrowNavigationOptions {
    */
   preventScroll?: boolean
 
+  /**
+   * By default all currentElement would trigger navigation. If `true`, currentElement nodeName in the ignore list will return null
+   *
+   * @defaultValue false
+   */
+  enableIgnoredElement?: boolean
+
   /**
    * Focus the element after navigation
    *
@@ -55,6 +62,8 @@ interface ArrowNavigationOptions {
   focus?: boolean
 }
 
+const ignoredElement = ['INPUT', 'TEXTAREA']
+
 /**
  * Allow arrow navigation for every html element with data-radix-vue-collection-item tag
  *
@@ -70,7 +79,7 @@ export function useArrowNavigation(
   parentElement: HTMLElement | undefined,
   options: ArrowNavigationOptions = {},
 ): HTMLElement | null {
-  if (!currentElement)
+  if (!currentElement || (options.enableIgnoredElement && ignoredElement.includes(currentElement.nodeName)))
     return null
 
   const {