fix(NavigationMenu): input not working in NavigationContent (#644)

radix-vue · Jan 31, 2024 · 912562a · 912562a
1 parent dc4e3e7
commit 912562a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git 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
@@ -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 {