Merge pull request #31 from borisbelmar/develop

1.2.10

README.md

@@ -25,7 +25,9 @@ At the top of your application, you need to initialize the module. This will add
 ```typescript
 import { initArrowNavigation } from '@arrow-navigation/core'
 
-initArrowNavigation()
+initArrowNavigation({
+  preventScroll: true // Prevent the default behavior of the arrow keys to scroll the page. The default value is true
+})
 ```
 
 Then, you can use the `getArrowNavigation` to access the API.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arrow-navigation/core",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "description": "Zero-dependency library to navigate through UI elements using the keyboard arrow keys built with Typescript",
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",

src/arrowNavigation.ts

@@ -24,7 +24,8 @@ export const ERROR_MESSAGES = {
 
 export function initArrowNavigation ({
   errorOnReinit = false,
-  debug = false
+  debug = false,
+  preventScroll = true
 }: ArrowNavigationOptions = {}) {
   const state: ArrowNavigationState = {
     currentElement: null,
@@ -38,7 +39,7 @@ export function initArrowNavigation ({
   const changeFocusElementHandler = (nextElement: FocusableElement, direction?: Direction) => {
     const prevElement = getCurrentElement(state) as FocusableElement
     state.currentElement = nextElement.id
-    nextElement.el.focus()
+    nextElement.el.focus({ preventScroll })
     changeFocusEventHandler({
       nextElement,
       prevElement,
@@ -60,7 +61,7 @@ export function initArrowNavigation ({
 
   const onKeyPress = getArrowPressHandler(state, changeFocusElementHandler)
 
-  const onGlobalFocus = (event: FocusEvent) => globalFocusHandler(state, event)
+  const onGlobalFocus = (event: FocusEvent) => globalFocusHandler(state, event, preventScroll)
 
   window.addEventListener('keydown', onKeyPress)
   window.addEventListener('focus', onGlobalFocus, true)

src/handlers/globalFocusHandler.test.ts

@@ -15,7 +15,7 @@ describe('globalFocusHandler', () => {
     state.currentElement = 'element-0-0'
     const focusMock = jest.fn();
     (getCurrentElement(state) as FocusableElement).el.focus = focusMock
-    globalFocusHandler(state, event)
+    globalFocusHandler(state, event, true)
     expect(state.currentElement).toBe('element-0-0')
     expect(focusMock).toHaveBeenCalled()
   })
@@ -25,15 +25,15 @@ describe('globalFocusHandler', () => {
     state.currentElement = 'element-0-0'
     const focusMock = jest.fn();
     (getCurrentElement(state) as FocusableElement).el.focus = focusMock
-    globalFocusHandler(state, event)
+    globalFocusHandler(state, event, true)
     expect(state.currentElement).toBe('element-0-0')
     expect(focusMock).not.toHaveBeenCalled()
   })
 
   it('should not focus the current element if not exists on state', () => {
     const event = { target: { id: 'non-existent' } } as unknown as FocusEvent
     state.currentElement = 'non-existent-current'
-    globalFocusHandler(state, event)
+    globalFocusHandler(state, event, true)
     expect(state.currentElement).toBe('non-existent-current')
     expect(getCurrentElement(state)).toBe(null)
   })

src/handlers/globalFocusHandler.ts

@@ -1,12 +1,16 @@
 import getCurrentElement from '@/utils/getCurrentElement'
 import { ArrowNavigationState } from '@/types'
 
-const globalFocusHandler = (state: ArrowNavigationState, event: FocusEvent) => {
+const globalFocusHandler = (
+  state: ArrowNavigationState,
+  event: FocusEvent,
+  preventScroll: boolean
+) => {
   const target = event.target as HTMLElement
   const currentElement = getCurrentElement(state)
   if (!currentElement) return
   if (target && target.id !== currentElement.id) {
-    currentElement.el.focus()
+    currentElement.el.focus({ preventScroll })
   }
 }
 

src/types.ts

@@ -87,6 +87,7 @@ export type ArrowNavigationState = {
 export type ArrowNavigationOptions = {
   debug?: boolean
   errorOnReinit?: boolean
+  preventScroll?: boolean
 }
 
 export type GetNextOptions = {