fix: focus first non-disabled item if all items have tabindex -1

vaadin · Mar 18, 2024 · d6d9246 · d6d9246
1 parent 7c5e16b
commit d6d9246
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/test/vaadin-list-mixin.html b/test/vaadin-list-mixin.html
@@ -298,6 +298,15 @@
           list.focus();
           expect(spy.calledOnce).to.be.true;
         });
+
+        it('should call focus() on the first non-disabled item if all items have tabindex -1', () => {
+          list.items.forEach((item) => {
+            item.tabIndex = -1;
+          });
+          const spy = sinon.spy(list.items[2], 'focus');
+          list.focus();
+          expect(spy.calledOnce).to.be.true;
+        });
       });
 
       describe('tabIndex when all the items are disabled', () => {

diff --git a/vaadin-list-mixin.html b/vaadin-list-mixin.html
@@ -288,8 +288,15 @@
     focus() {
       // In initialisation (e.g vaadin-select) observer might not been run yet.
       this._observer && this._observer.flush();
-      const firstItem = this.querySelector('[tabindex="0"]') || (this.items ? this.items[0] : null);
-      firstItem && firstItem.focus();
+      const firstItem = this.querySelector('[tabindex="0"]');
+      if (firstItem) {
+        firstItem.focus();
+      } else if (this.items) {
+        const idx = this._getAvailableIndex(0, null, item => !item.disabled);
+        if (idx >= 0) {
+          this.items[idx].focus();
+        }
+      }
     }
 
     /**