fix(select): Tab key behaviour with open dropdown (#1367)

Pressing Tab in a select with open dropdown when
the active item matches the current selection now
correctly moves the focus back on the select after
closing the dropdown.

Author: rkaraivanov

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- Select - pressing Tab key in an opened Select now correctly returns focus back to the component after closing the dropdown
+
 ## [5.0.0] - 2024-08-27
 ### Added
 - Icon Registry [#1304](https://github.com/IgniteUI/igniteui-webcomponents/issues/1304)

src/components/select/select.spec.ts

@@ -22,6 +22,7 @@ import {
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import {
   FormAssociatedTestBed,
+  isFocused,
   simulateClick,
   simulateKeyboard,
 } from '../common/utils.spec.js';
@@ -831,6 +832,22 @@ describe('Select', () => {
       expect(select.open).to.be.false;
     });
 
+    it('pressing Tab while the active item is the current selected item moves focus back to the component', async () => {
+      select.value = 'spec';
+      await openSelect();
+
+      simulateKeyboard(select, tabKey);
+      await elementUpdated(select);
+
+      const item = select.items[0];
+
+      checkItemState(item, { active: true, selected: true });
+      expect(select.selectedItem).to.equal(item);
+      expect(select.value).to.equal(item.value);
+      expect(select.open).to.be.false;
+      expect(isFocused(select)).to.be.true;
+    });
+
     // Search selection
 
     it('does not select disabled items when searching (closed state)', async () => {
@@ -1038,7 +1055,6 @@ describe('Select', () => {
       expect(select.selectedItem).to.be.null;
     });
 
-    // TODO
     it('ArrowUp (closed state)', async () => {
       const eventSpy = spy(select, 'emitEvent');
       const activeItems = Items.filter((item) => !item.disabled).reverse();

src/components/select/select.ts

@@ -426,7 +426,7 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
   private onTabKey(event: KeyboardEvent) {
     if (this.open) {
       event.preventDefault();
-      this._selectItem(this._activeItem);
+      this._selectItem(this._activeItem ?? this._selectedItem);
       this._hide(true);
     }
   }
@@ -472,13 +472,11 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
       return null;
     }
 
-    const items = this.items;
-    const [previous, current] = [
-      items.indexOf(this._selectedItem!),
-      items.indexOf(item),
-    ];
+    const shouldFocus = emit && this.open;
+    const shouldHide = emit && !this.keepOpenOnSelect;
 
-    if (previous === current) {
+    if (this._selectedItem === item) {
+      if (shouldFocus) this.input.focus();
       return this._selectedItem;
     }
 
@@ -487,8 +485,8 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
     this._updateValue(newItem.value);
 
     if (emit) this.handleChange(newItem);
-    if (emit && this.open) this.input.focus();
-    if (emit && !this.keepOpenOnSelect) this._hide(true);
+    if (shouldFocus) this.input.focus();
+    if (shouldHide) this._hide(true);
 
     return this._selectedItem;
   }
@@ -534,7 +532,6 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
   /** Removes focus from the component. */
   public override blur() {
     this.input.blur();
-    super.blur();
   }
 
   /** Checks the validity of the control and moves the focus to it if it is not valid. */