only have navigating attribute on keyboard navigation

vaadin · Dec 17, 2024 · 16ed88c · 16ed88c
1 parent 46369a8
commit 16ed88c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/packages/virtual-list/src/vaadin-virtual-list-selection-mixin.js b/packages/virtual-list/src/vaadin-virtual-list-selection-mixin.js
@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-import { getFocusableElements } from '@vaadin/a11y-base';
+import { getFocusableElements, isKeyboardActive } from '@vaadin/a11y-base';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { get } from '@vaadin/component-base/src/path-utils.js';
@@ -284,13 +284,16 @@ export const SelectionMixin = (superClass) =>
 
     /** @private */
     __isNavigating() {
-      return this.hasAttribute('navigating');
+      return !!this.__navigating;
     }
 
     /** @private */
     __updateNavigating(navigating) {
-      const isNavigating = this.__isSelectable && navigating;
-      this.toggleAttribute('navigating', isNavigating);
+      this.__navigating = this.__isSelectable && navigating;
+      this.toggleAttribute(
+        'navigating',
+        this.__navigating && isKeyboardActive() && this.contains(this.__getActiveElement()),
+      );
 
       const isInteracting = this.__isSelectable && !navigating;
       this.toggleAttribute('interacting', isInteracting);
@@ -418,6 +421,10 @@ export const SelectionMixin = (superClass) =>
         this.__updateFocusIndex(clickedRootElement.__index);
         this.__toggleSelection(clickedRootElement.__item);
       }
+
+      if (this.hasAttribute('navigating')) {
+        this.__updateNavigating(this.__isNavigating());
+      }
     }
 
     /** @private */

diff --git a/packages/virtual-list/test/virtual-list-selection.common.ts b/packages/virtual-list/test/virtual-list-selection.common.ts
@@ -12,6 +12,8 @@ async function click(el: HTMLElement) {
   await new Promise<void>((resolve) => {
     queueMicrotask(() => resolve());
   });
+  // Make focus-utils reset isKeyboardActive
+  window.dispatchEvent(new MouseEvent('mousedown'));
   helperClick(el);
   await nextFrame();
 }
@@ -667,6 +669,24 @@ describe('selection', () => {
         expect(list.hasAttribute('navigating')).to.be.false;
       });
 
+      it('should clear navigating state when clicking an item', async () => {
+        beforeButton.focus();
+        await sendKeys({ press: 'Tab' });
+        await nextFrame();
+
+        await click(getRenderedItem(0)!);
+        await nextFrame();
+        expect(list.hasAttribute('navigating')).to.be.false;
+      });
+
+      it('should clear navigating state when focus leaves the component', async () => {
+        beforeButton.focus();
+        await sendKeys({ press: 'Tab' });
+        await sendKeys({ press: 'Tab' });
+        await nextFrame();
+        expect(list.hasAttribute('navigating')).to.be.false;
+      });
+
       it('should shift tab to an item from outside', async () => {
         afterButton.focus();
         await shiftTab();