Merge pull request #36 from borisbelmar/bugfix/navigation

Fix navigation bug and documentation

README.md

@@ -84,7 +84,7 @@ const api = getArrowNavigation()
 
 // Set the focus to the first element of the group-0
 const id = getElementIdByOrder('group-0', 0) // 'group-0-0'
-api.setFocusedElement(id)
+api.setFocusElement(id)
 ```
 
 ## getArrowNavigation
@@ -226,7 +226,7 @@ api.registerElement(element.id, 'group-0')
 const focusedElement = api.getFocusedElement()
 ```
 
-### setFocusedElement
+### setFocusElement
 
 Set the focused element.
 
@@ -246,7 +246,7 @@ api.registerGroup(container.id)
 api.registerElement(element.id, container.id)
 api.registerElement(element2.id, container.id)
 
-api.setFocusedElement('element-0-1')
+api.setFocusElement('element-0-1')
 
 document.activeElement.id === element2.id // true
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arrow-navigation/core",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "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/handlers/directionPressHandler.ts

@@ -21,6 +21,13 @@ export default function directionPressHandler ({
 }: DirectionPressHandlerProps) {
   const currentElement = getCurrentElement(state)
 
+  const focusRef = state.adapter.getFocusedNode()
+  const currentRef = currentElement && state.adapter.getNodeRef(currentElement)
+
+  if (currentRef && focusRef !== currentRef) {
+    state.adapter.focusNode(currentElement, { preventScroll: true })
+  }
+
   if (!currentElement) {
     const initialElement = state.elements.get(state.initialFocusElement || '')
     if (initialElement) {
@@ -36,13 +43,6 @@ export default function directionPressHandler ({
     return
   }
 
-  const focusRef = state.adapter.getFocusedNode()
-  const currentRef = currentElement && state.adapter.getNodeRef(currentElement)
-
-  if (currentElement && focusRef !== currentRef) {
-    state.adapter.focusNode(currentElement, { preventScroll: true })
-  }
-
   const currentGroupConfig = state.groupsConfig.get(currentElement.group)
 
   if (currentGroupConfig?.arrowDebounce && repeat) {

src/handlers/utils/findNextGroupElement.ts

@@ -20,7 +20,10 @@ export default function findNextGroupElement ({
   const config = state.groupsConfig.get(nextGroup.id)
 
   if (config) {
-    const firstElement = (config.saveLast && config.lastElement) || config.firstElement
+    const lastElement = config.saveLast && config.lastElement
+    const lastElementNode = lastElement && state.elements.get(lastElement)
+
+    const firstElement = (lastElementNode && lastElement) || config.firstElement
 
     if (firstElement) {
       nextElement = state.elements.get(firstElement) as FocusableElement

src/index.ts

@@ -4,6 +4,7 @@ export {
 } from './arrowNavigation'
 
 export { default as getElementIdByOrder } from './utils/getElementIdByOrder'
+export { default as webAdapter } from './utils/webAdapter'
 
 export { default as ArrowNavigationEvents } from './config/events'
 export { default as ArrowNavigationOrder } from './config/order'