From 87b041f1f6c17d1a07f3f999e207779457560232 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Tue, 1 Jun 2021 14:19:01 +0200
Subject: [PATCH] [Patch] Fix #339 Dropdown keyboard focus

---
 .../dxc-dropdown-option.component.html        |  2 +-
 .../dxc-dropdown-option.component.ts          | 40 ++++++++++++++++---
 .../dxc-dropdown/dxc-dropdown.component.ts    | 12 +++++-
 .../dxc-dropdown/services/dropdown.service.ts | 29 +++++++++++---
 .../lib/theme/complexThemeBindingStrategy.ts  |  2 +-
 .../src/lib/theme/componentTokens.ts          |  2 +-
 6 files changed, 70 insertions(+), 17 deletions(-)

diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown-option/dxc-dropdown-option.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown-option/dxc-dropdown-option.component.html
index a6d1ee386..d79753617 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown-option/dxc-dropdown-option.component.html
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown-option/dxc-dropdown-option.component.html
@@ -1,4 +1,4 @@
-<button mat-menu-item (click)="selectedOption()" class="option">
+<button mat-menu-item (keydown)="arrowKey($event)" (click)="selectedOption()" class="option">
   <div>
     <ng-content select="dxc-dropdown-icon"></ng-content>
     {{label}}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown-option/dxc-dropdown-option.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown-option/dxc-dropdown-option.component.ts
index ce3bc1ee2..672650274 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown-option/dxc-dropdown-option.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown-option/dxc-dropdown-option.component.ts
@@ -1,5 +1,13 @@
-import { Component, EventEmitter, Input, OnChanges, Output } from "@angular/core";
-import { DropdownService } from '../services/dropdown.service';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  ViewChild,
+} from "@angular/core";
+import { MatMenuItem } from "@angular/material/menu";
+import { DropdownService } from "../services/dropdown.service";
 
 @Component({
   selector: "dxc-dropdown-option",
@@ -8,13 +16,33 @@ import { DropdownService } from '../services/dropdown.service';
 export class DxcDropdownOptionComponent implements OnChanges {
   @Input() public value;
   @Input() public label: string;
-  
-  constructor(private service: DropdownService) {}
 
-  public ngOnChanges(): void {
+  @ViewChild(MatMenuItem) menuItem: MatMenuItem;
+
+  constructor(private service: DropdownService) {
+    this.service.items.push(this);
+  }
+
+  public ngOnChanges(): void {}
+
+  setFocus() {
+    this.menuItem?.focus();
+  }
+
+  arrowKey($event) {
+    if ($event.keyCode === 40 || $event.keyCode === 38) {
+      $event.preventDefault();
+      const direction =
+        $event.keyCode === 38
+          ? "previous"
+          : $event.keyCode === 40
+          ? "next"
+          : "";
+      this.service.changeFocus(direction, this);
+    }
   }
 
   selectedOption() {
-      this.service.setSelected(this.value);
+    this.service.setSelected(this.value);
   }
 }
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown.component.ts
index 6deb047b4..4eed03944 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown.component.ts
@@ -65,13 +65,15 @@ export class DxcDropdownComponent implements OnChanges {
   @Output() public onSelectOption: EventEmitter<any> = new EventEmitter<any>();
 
   @ViewChild("dropdownButton", { static: true }) dropdownButton;
-  @ViewChild(MatMenuTrigger, { static: false }) menu: MatMenuTrigger;
+  @ViewChild(MatMenuTrigger, { static: false }) menuTrigger: MatMenuTrigger;
+
+  
 
   @HostListener("document:click", ["$event"])
   clickout(event) {
     if (!this._element.nativeElement.contains(event.target)) {
       if (this.menuOpened === "opened") {
-        this.menu.closeMenu();
+        this.menuTrigger.closeMenu();
       }
     }
   }
@@ -211,6 +213,11 @@ export class DxcDropdownComponent implements OnChanges {
             background-color: var(--dropdown-hoverBackgroundOption);
             border-color: var(--dropdown-hoverBackgroundOption);
           }
+          &.cdk-focused {
+            color: var(--dropdown-dropdownFontColor);
+            background-color: var(--dropdown-hoverBackgroundOption);
+            border-color: var(--dropdown-hoverBackgroundOption);
+          }
         }
         padding-top: 0px !important;
         padding-bottom: 0px !important;
@@ -320,6 +327,7 @@ export class DxcDropdownComponent implements OnChanges {
     this.triggerStyles = this.triggerButtonStyles(
       this.defaultInputs.getValue()
     );
+    this.menuOpened === "opened" && this.service.focusFirstItem();
   }
 
   getDynamicStyle(inputs) {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/services/dropdown.service.ts b/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/services/dropdown.service.ts
index c40e18355..d80dea24d 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/services/dropdown.service.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/services/dropdown.service.ts
@@ -1,15 +1,32 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { Injectable } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: "root",
 })
 export class DropdownService {
-
-  constructor() { }
+  constructor() {}
 
   public selected: BehaviorSubject<any> = new BehaviorSubject(null);
-  
+
+  public items = [];
+
+  public focusFirstItem(): void {
+    this.items[0]?.setFocus();
+  }
+
+  public changeFocus(direction, focusedItem): void {
+    const index = this.items.indexOf(focusedItem);
+    if (
+      !(index === 0 && direction === "previous") ||
+      !(index === this.items.length - 1 && direction === "next")
+    ) {
+      direction === "previous"
+        ? this.items[index - 1]?.setFocus()
+        : this.items[index + 1]?.setFocus();
+    }
+  }
+
   public setSelected(selected): void {
     this.selected.next(selected);
   }
diff --git a/projects/dxc-ngx-cdk/src/lib/theme/complexThemeBindingStrategy.ts b/projects/dxc-ngx-cdk/src/lib/theme/complexThemeBindingStrategy.ts
index 22b130e11..7a43e84c8 100644
--- a/projects/dxc-ngx-cdk/src/lib/theme/complexThemeBindingStrategy.ts
+++ b/projects/dxc-ngx-cdk/src/lib/theme/complexThemeBindingStrategy.ts
@@ -155,7 +155,7 @@ export class ComplexThemeBindingStrategy implements MappingStrategy {
       this.setOpacity(theme?.dropdown?.baseColor, 0.8) ??
       tokens["--dropdown-hoverBackgroundColor"];
     proccessedTokens["--dropdown-hoverBackgroundOption"] =
-      this.setOpacity(theme?.dropdown?.baseColor, 0.34) ??
+      // this.setOpacity(theme?.dropdown?.baseColor, 0.34) ??
       tokens["--dropdown-hoverBackgroundOption"];
 
     //FOOTER
diff --git a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts
index 767817b9b..305d59181 100644
--- a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts
+++ b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts
@@ -138,7 +138,7 @@ export const componentTokens = {
   "--dropdown-fontColor": globalTokens.black,
   "--dropdown-dropdownBackgroundColor": globalTokens.white,
   "--dropdown-dropdownFontColor": globalTokens.black,
-  "--dropdown-hoverBackgroundOption": globalTokens.white,
+  "--dropdown-hoverBackgroundOption": globalTokens.lightGrey,
   "--dropdown-hoverBackgroundColor": globalTokens.white,
   "--dropdown-scrollBarThumbColor": globalTokens.darkGrey,
   "--dropdown-scrollBarTrackColor": globalTokens.lightGrey,