fix: contexts chain

chialab · Oct 20, 2022 · 565bb65 · 565bb65
1 parent 83de081
commit 565bb65
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 65 deletions.
diff --git a/.changeset/two-walls-rule.md b/.changeset/two-walls-rule.md
@@ -0,0 +1,5 @@
+---
+"@chialab/loock": patch
+---
+
+Fix contexts chain.
diff --git a/src/Manager.js b/src/Manager.js
@@ -65,14 +65,14 @@ export class Manager {
                 return;
             }
             if (event.key == ESC_KEY.key || event.key == ESC_KEY.altKey) {
-                if (this.activeContext === this.defaultContext && !this.activeContext.hasCurrentElement()) {
+                if (this.activeContext === this.defaultContext) {
+                    if (this.activeContext.hasCurrentElement()) {
+                        event.preventDefault();
+                        this.activeContext.unsetCurrentElement();
+                    }
                     return;
                 }
                 event.preventDefault();
-                if (this.activeContext.hasCurrentElement()) {
-                    this.activeContext.unsetCurrentElement();
-                    return;
-                }
                 const result = await this.activeContext.exit();
                 if (!result) {
                     return;
@@ -104,25 +104,19 @@ export class Manager {
          */
         this.onFocusIn = ({ target }) => {
             const context = this.contexts
+                .filter((context) => !context.disabled)
                 .filter(({ element }) => element === target || element.contains(target))
                 .sort(({ element: match1 }, { element: match2 }) => (match1.contains(match2) ? 1 : -1))[0];
 
-            if (context && !context.active && !context.disabled) {
-                context.enter(target);
-                return;
-            }
-
-            if (!this.activeContext) {
-                return;
-            }
-            if (target === this.activeContext.element) {
-                this.activeContext.unsetCurrentElement(false);
-                return;
-            }
-            const elements = this.activeContext.findFocusableChildren();
-            if (elements.indexOf(target) !== -1) {
-                this.activeContext.setCurrentElement(target);
-            } else {
+            if (context) {
+                if (!context.active) {
+                    context.enter(target);
+                } else if (target !== context.element) {
+                    context.setCurrentElement(target);
+                } else {
+                    context.unsetCurrentElement(false);
+                }
+            } else if (this.activeContext) {
                 this.activeContext.exit();
             }
         };
@@ -184,9 +178,11 @@ export class Manager {
             if ((/** @type {CustomEvent} */ (event)).detail !== context) {
                 return;
             }
-            this._activeElement = /** @type {HTMLElement} */ (this._activeElement || this.root.document.activeElement);
-            this.activeContext = context;
-            this.actives.push(context);
+            if (this.contexts.indexOf(context) !== -1) {
+                this._activeElement = /** @type {HTMLElement} */ (this._activeElement || this.root.document.activeElement);
+                this.activeContext = context;
+                this.actives.push(context);
+            }
         };
 
         const onFocusExit = (event) => {

diff --git a/test/index.spec.js b/test/index.spec.js
@@ -42,7 +42,7 @@ describe('Loock Tests', function() {
         expect(document.activeElement).to.equal(document.body);
     });
 
-    it('should navigate within one context', async () => {
+    it('should navigate within context', async () => {
         const alphabetDiv = document.querySelector('.alphabet');
         manager.createContext(alphabetDiv);
 
@@ -64,44 +64,4 @@ describe('Loock Tests', function() {
         userEvent.keyboard('{esc}');
         expect(document.activeElement).to.equal(alphabetDiv);
     });
-
-    it('should navigate within contexts', async () => {
-        const alphabetDiv = document.querySelector('.alphabet');
-        manager.createContext(alphabetDiv);
-
-        const numericDiv = document.querySelector('.numeric');
-        manager.createContext(numericDiv);
-
-        await wait(250);
-        userEvent.tab();
-        expect(document.activeElement).to.equal(alphabetDiv);
-        await wait(250);
-        userEvent.tab();
-        expect(document.activeElement).to.equal(document.querySelector('button[name="buttonA"]'));
-        userEvent.keyboard('{esc}');
-        expect(document.activeElement).to.equal(alphabetDiv);
-        userEvent.keyboard('{esc}');
-        expect(document.activeElement).to.equal(alphabetDiv);
-        await wait(250);
-        userEvent.tab();
-        expect(document.activeElement).to.equal(document.querySelector('button[name="buttonA"]'));
-        await wait(250);
-        userEvent.tab();
-        expect(document.activeElement).to.equal(document.querySelector('button[name="buttonB"]'));
-        await wait(250);
-        userEvent.tab();
-        expect(document.activeElement).to.equal(document.querySelector('button[name="buttonC"]'));
-        userEvent.keyboard('{esc}');
-        expect(document.activeElement).to.equal(alphabetDiv);
-        await wait(250);
-        numericDiv.focus();
-        expect(document.activeElement).to.equal(numericDiv);
-        await wait(250);
-        userEvent.tab();
-        expect(document.activeElement).to.equal(document.querySelector('button[name="button1"]'));
-        userEvent.keyboard('{esc}');
-        expect(document.activeElement).to.equal(numericDiv);
-        userEvent.keyboard('{esc}');
-        expect(document.activeElement).to.equal(alphabetDiv);
-    });
 });