Merge pull request #1 from dcooney/feature/prevent-focus-jump

Prevent focus jump from other element.

Author: dcooney

.eslintignore

@@ -0,0 +1,4 @@
+build/
+node_modules/
+dist/
+src/demo

.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+   extends: ['react-app'],
+   rules: {
+      'no-console': ['error', {allow: ['warn', 'error']}]
+   }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-use-arrows",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "React hook for traversing DOM elements with keyboard arrows.",
   "homepage": "https://dcooney.github.io/react-use-arrows/",
   "source": "src/lib/useArrows.tsx",
@@ -44,7 +44,7 @@
     "start": "react-scripts start",
     "dev": "microbundle watch",
     "build": "rm -rf dist && microbundle",
-    "build:demo": "BUILD_PATH='./docs' react-scripts build"
+    "build:docs": "BUILD_PATH='./docs' react-scripts build"
   },
   "keywords": [
     "arrows",

src/demo/examples/Dropdown.tsx

@@ -15,10 +15,24 @@ export default function Dropdown() {
 
    /**
     * Handle keyboard controls.
-    *
-    * @param {Event} event The click event.
     */
-   function handleEsc(event: KeyboardEvent) {
+   function handleKeydown(event: any) {
+      const {key} = event
+      switch (key) {
+         case 'ArrowDown':
+            setActive(true)
+            event.preventDefault()
+            break
+
+         default:
+            break
+      }
+   }
+
+   /**
+    * Handle keyboard controls.
+    */
+   function handleEsc(event: any) {
       const {key} = event
       switch (key) {
          // Exit if esc and no focusable elements.
@@ -35,7 +49,8 @@ export default function Dropdown() {
    useEffect(() => {
       if (active) {
          // Set focus on first dropdown item.
-         ref.current?.querySelector('a')?.focus()
+         const element = ref.current?.querySelector('a') as HTMLElement
+         element?.focus()
       }
    }, [active])
 
@@ -58,6 +73,7 @@ export default function Dropdown() {
             <button
                className="btn btn-neutral"
                onClick={() => setActive(!active)}
+               onKeyDown={(e) => handleKeydown(e)}
             >
                Toggle Menu
             </button>
@@ -81,7 +97,7 @@ export default function Dropdown() {
                      <li>
                         <a
                            href="https://getinstantimages.com"
-                           className={btnClass}
+                           className={`${btnClass} test`}
                         >
                            Instant Images
                         </a>
@@ -96,10 +112,10 @@ export default function Dropdown() {
                      </li>
                      <li>
                         <a
-                           href="https://dcooney.github.io/react-a11y-dropdown/"
+                           href="https://dcooney.github.io/react-npm-starter/"
                            className={btnClass}
                         >
-                           React A11y Dropdown
+                           React NPM Starter
                         </a>
                      </li>
                   </ul>

src/lib/useArrows.tsx

@@ -11,8 +11,6 @@ const defaults = [
    '[tabindex]:not([tabindex="-1"])'
 ]
 
-// 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
-
 interface useArrowsProps {
    selectors?: string
    useUpDown?: boolean
@@ -79,6 +77,17 @@ export default function useArrows(
             const last = elements[elements.length - 1]
             const index = [...elements].indexOf(activeElement)
 
+            /**
+             * Prevent focus from jumping if the current focus is not in the element array.
+             *
+             * This will help prevent focus from jumping to the next focusable element
+             * when using keydown event on external DOM element.
+             */
+            if (elements.indexOf(event?.target) === -1) {
+               return
+            }
+
+            // Switch focus based on key pressed.
             switch (key) {
                case 'ArrowUp':
                   if (useUpDown) {
@@ -137,7 +146,7 @@ export default function useArrows(
          // Dispose of event listener on unmount.
          document.removeEventListener('keydown', arrowHandler, false)
       }
-   }, [])
+   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
    return ref
 }