chore(combo): refactor focus management for disabled/header items

Author: ViktorSlavov

projects/igniteui-angular/src/lib/combo/combo-item.component.ts

@@ -89,7 +89,7 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent implements D
      */
     clicked(event): void {
         this.comboAPI.disableTransitions = false;
-        if (!this.shouldSelect) { return; }
+        if (!this.isSelectable) { return; }
         this.dropDown.navigateItem(this.index);
         this.comboAPI.set_selected_item(this.itemID, event);
     }

projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts

@@ -178,7 +178,7 @@ export class IgxDropDownItemBaseDirective implements DoCheck {
      */
     @HostBinding('class.igx-drop-down__item--focused')
     get focused(): boolean {
-        return (!this.isHeader && !this.disabled) && this._focused;
+        return this.isSelectable && this._focused;
     }
 
     /**
@@ -330,20 +330,17 @@ export class IgxDropDownItemBaseDirective implements DoCheck {
         }
     }
 
-    /**
-     * If the clicked item is a header or is disabled,
-     * should not attempt to select it.
-     * If `allowItemsFocus` is true, should move the focus to the actual item.
-     */
-    protected get shouldSelect(): boolean {
-        if (this.disabled || this.isHeader) {
+    /** Returns true if the items is not a header or disabled  */
+    protected get isSelectable(): boolean {
+        return  !(this.disabled || this.isHeader);
+    }
+
+    /** If `allowItemsFocus` is enabled, keep the browser focus on the active item */
+    protected ensureItemFocus() {
+        if (this.dropDown.allowItemsFocus) {
             const focusedItem = this.dropDown.items.find((item) => item.focused);
-            if (this.dropDown.allowItemsFocus && focusedItem) {
-                focusedItem.element.nativeElement.focus({ preventScroll: true });
-            }
-            return false;
-        } else {
-            return true;
+            if (!focusedItem) { return; }
+            focusedItem.element.nativeElement.focus({ preventScroll: true });
         }
     }
 

projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.ts

@@ -23,7 +23,7 @@ export class IgxDropDownItemComponent extends IgxDropDownItemBaseDirective {
             const focusedIndex = focusedItem ? focusedItem.index : -1;
             focusedState = this._index === focusedIndex;
         }
-        return !this.isHeader && !this.disabled && focusedState;
+        return this.isSelectable && focusedState;
     }
 
     /**
@@ -58,7 +58,7 @@ export class IgxDropDownItemComponent extends IgxDropDownItemBaseDirective {
      */
     @HostBinding('attr.tabindex')
     get setTabIndex() {
-        const shouldSetTabIndex = this.dropDown.allowItemsFocus && !(this.disabled || this.isHeader);
+        const shouldSetTabIndex = this.dropDown.allowItemsFocus && this.isSelectable;
         if (shouldSetTabIndex) {
             return 0;
         } else {
@@ -70,7 +70,10 @@ export class IgxDropDownItemComponent extends IgxDropDownItemBaseDirective {
      * @inheritdoc
      */
     clicked(event): void {
-        if (!this.shouldSelect) { return; }
+        if (!this.isSelectable) {
+            this.ensureItemFocus();
+            return;
+        }
         if (this.selection) {
             this.dropDown.selectItem(this, event);
         }