Merge pull request #331 from UiPath/fix/change-focus-logic

fix(suggest): fix focus logic when navigating with TAB

Author: sergiubologa

projects/angular/components/ui-grid/src/ui-grid.component.scss

@@ -321,10 +321,7 @@ ui-grid {
             justify-content: center;
             display: flex;
             align-items: center;
-
-            mat-icon {
-                margin-right: $ui-grid-default-spacing;
-            }
+            margin-right: $ui-grid-default-spacing;
         }
 
         &-dropdown-filter {

projects/angular/components/ui-suggest/src/ui-suggest.component.html

@@ -37,6 +37,7 @@
                  (keydown.space)="preventDefault($event)"
                  (focus)="onFocus();"
                  (blur)="onBlur()"
+                 #displayContainer
                  matRipple
                  class="display"
                  role="combobox">
@@ -173,7 +174,7 @@
          (keydown.esc)="preventDefault($event)"
          (keyup.esc)="preventDefault($event);
             close();"
-         (keydown.tab)="close(false)"
+         (keydown.tab)="onOptionsDropdownTabPressed()"
          (keydown.shift.tab)="close()"
          tabindex="-1"
          class="ui-suggest-dropdown-item-list-container">

projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts

@@ -990,6 +990,29 @@ const sharedSpecifications = (
             assert.isOpen();
         });
 
+        it('should focus the display element if Tab key is pressed and the dropdown is open', () => {
+            fixture.detectChanges();
+
+            const display = fixture.debugElement.query(By.css('.display'));
+            display.nativeElement.dispatchEvent(
+                EventGenerator.keyDown(Key.Enter),
+            );
+
+            fixture.detectChanges();
+
+            const itemContainer = fixture.debugElement.query(By.css('.ui-suggest-dropdown-item-list-container'));
+            itemContainer.nativeElement.dispatchEvent(
+                EventGenerator.keyDown(Key.Tab),
+            );
+
+            fixture.detectChanges();
+
+            // We can't test if the next element is focused because jasmine can't simulate the default behavior of the TAB key.
+            // We will test if the implemented logic is working.
+            // https://stackoverflow.com/questions/25032300/jasmine-test-simulate-tab-keydown-and-detect-newly-focused-element
+            expect(document.activeElement).toBe(display.nativeElement);
+        });
+
         it('should close if Tab is pressed', () => {
             fixture.detectChanges();
             const display = fixture.debugElement.query(By.css('.display'));
@@ -2760,7 +2783,7 @@ describe('Component: UiSuggest', () => {
                             [drillDown]="drillDown"
                             [compact]="compact"
                             formControlName="test">
-            </ui-suggest>
+                </ui-suggest>
             </mat-form-field>
         </form>
         `,

projects/angular/components/ui-suggest/src/ui-suggest.component.ts

@@ -684,6 +684,7 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
     suggestContainerWidth = 0;
 
     @ViewChild('suggestContainer') suggestContainer!: ElementRef;
+    @ViewChild('displayContainer') displayContainer?: ElementRef;
 
     @ViewChild(CdkVirtualScrollViewport)
     protected set _virtualScrollerQuery(value: CdkVirtualScrollViewport) {
@@ -1294,6 +1295,13 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
             : this.defaultValue;
     }
 
+    onOptionsDropdownTabPressed() {
+        if (this.isOpen && !this.expandInline) {
+            this.displayContainer?.nativeElement.focus();
+        }
+        this.close(false);
+    }
+
     private _getDropdownPositionAccordingToDirection() {
         return this.direction === 'up' ? this.upPosition : this.downPosition;
     }