Merge branch 'master' into overlap-readme-update

bbc · Jan 17, 2024 · dccfc3f · dccfc3f
2 parents 68b2aa1 + b6605d4
commit dccfc3f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/lib/lrud.js b/lib/lrud.js
@@ -317,22 +317,23 @@ export const getNextFocus = (elem, keyOrKeyCode, scope) => {
     const isNestedContainer = parentContainer?.contains(candidateContainer);
     const isAnscestorContainer = candidateContainer?.contains(parentContainer);
 
+    if (elem.id) parentContainer?.setAttribute('data-focus', elem.id);
+
     if (!isCurrentContainer && (!isNestedContainer || isBestCandidateAContainer)) {
       const blockedExitDirs = getBlockedExitDirs(parentContainer, candidateContainer);
       if (blockedExitDirs.indexOf(exitDir) > -1) return;
 
       if (candidateContainer && !isAnscestorContainer) {
         // Ignore active child behaviour when moving into a container that we
         // are already nested in
-        if (elem.id) parentContainer?.setAttribute('data-focus', elem.id);
-
         const lastActiveChild = document.getElementById(candidateContainer.getAttribute('data-focus'));
 
         return lastActiveChild || getFocusables(candidateContainer)?.[0];
       }
     }
   }
 
+  if (bestCandidate?.id) parentContainer?.setAttribute('data-focus', bestCandidate.id);
   return bestCandidate;
 };
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/tv-lrud-spatial",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Spatial navigation library",
   "main": "lib/lrud.min.js",
   "directories": {

diff --git a/test/lrud.test.js b/test/lrud.test.js
@@ -667,5 +667,16 @@ describe('LRUD spatial', () => {
       await page.keyboard.press('ArrowUp');
       expect(await page.evaluate(() => document.activeElement.id)).toEqual('item-1');
     });
+
+    it('should still remember last active child if focus is manually moved from a container', async () => {
+      await page.evaluate(() => document.getElementById('item-1').focus());
+      await page.keyboard.press('ArrowDown');
+      await page.keyboard.press('ArrowRight');
+      expect(await page.evaluate(() => document.activeElement.id)).toEqual('item-6');
+      await page.evaluate(() => document.getElementById('item-8').focus());
+
+      await page.keyboard.press('ArrowUp');
+      expect(await page.evaluate(() => document.activeElement.id)).toEqual('item-6');
+    });
   });
 });