fix(list): modify key of defaultActive, add test

atinc · Dec 25, 2019 · c9c99a2 · c9c99a2
1 parent 912262b
commit c9c99a2
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/demo/src/app/components/+list/list-senior/list-senior.component.html b/demo/src/app/components/+list/list-senior/list-senior.component.html
@@ -31,6 +31,7 @@
     [thyMultiple]="selectionModel.multiple"
     [thyLayout]="selectionModel.isLayoutGrid ? 'grid' : 'list'"
     (thySelectionChange)="selectionChange($event)"
+    thyFirstItemDefaultActive="true"
   >
     <thy-list-option *ngFor="let item of items" [thyDisabled]="item.id === 2" [thyValue]="item?.id">
       <div class="text-center" *ngIf="selectionModel.isLayoutGrid">

diff --git a/src/list/selection/selection-list.spec.ts b/src/list/selection/selection-list.spec.ts
@@ -1,4 +1,4 @@
-import { Component, DebugElement } from '@angular/core';
+import { Component, DebugElement, ViewChild } from '@angular/core';
 import { ThySelectionListChange } from './selection.interface';
 import { async, ComponentFixture, fakeAsync, TestBed, tick, flush } from '@angular/core/testing';
 import { ThyListModule } from '../list.module';
@@ -89,12 +89,29 @@ describe('MatSelectionList without forms', () => {
             expect(selectionList.nativeElement.classList).toContain('thy-grid-list');
             expect(listOptions[0].nativeElement.classList).toContain('thy-grid-option');
         });
+
+        it(`should hover first when thyFirstItemDefaultActive is true`, () => {
+            fixture.detectChanges();
+            expect(listOptions[0].nativeElement.classList).toContain('hover');
+        });
+
+        it(`should not hover first when thyFirstItemDefaultActive is false`, () => {
+            const defaultFixture = TestBed.createComponent(SelectionListWithListOptionsDefaultComponent);
+            defaultFixture.detectChanges();
+            const defaultListOptions = defaultFixture.debugElement.queryAll(By.directive(ThyListOptionComponent));
+            expect(defaultListOptions[0].nativeElement.classList).not.toContain('hover');
+        });
     });
 });
 
 @Component({
     template: `
-        <thy-selection-list id="selection-list-1" [thyLayout]="layout" (thySelectionChange)="onValueChange($event)">
+        <thy-selection-list
+            id="selection-list-1"
+            [thyLayout]="layout"
+            (thySelectionChange)="onValueChange($event)"
+            [thyFirstItemDefaultActive]="true"
+        >
             <thy-list-option thyValue="inbox">
                 Inbox (disabled selection-option)
             </thy-list-option>
@@ -120,7 +137,11 @@ class SelectionListWithListOptionsComponent {
 
 @Component({
     template: `
-        <thy-selection-list id="selection-list-1" (thySelectionChange)="onValueChange($event)">
+        <thy-selection-list
+            id="selection-list-1"
+            [thyFirstItemDefaultActive]="false"
+            (thySelectionChange)="onValueChange($event)"
+        >
             <thy-list-option thyValue="inbox">
                 Inbox (disabled selection-option)
             </thy-list-option>
@@ -130,12 +151,14 @@ class SelectionListWithListOptionsComponent {
             <thy-list-option thyValue="sent-mail">
                 Sent Mail
             </thy-list-option>
-            <thy-list-option thyValue="drafts" *ngIf="showLastOption">
+            <thy-list-option thyValue="drafts">
                 Drafts
             </thy-list-option>
         </thy-selection-list>
     `
 })
 class SelectionListWithListOptionsDefaultComponent {
+    @ViewChild(ThySelectionListComponent) thySelectionListComponent: ThySelectionListComponent;
+
     onValueChange(_change: ThySelectionListChange) {}
 }
diff --git a/src/list/selection/selection-list.ts b/src/list/selection/selection-list.ts
@@ -30,6 +30,7 @@ import { ThySelectionListChange } from './selection.interface';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import { ScrollToService } from '../../core';
 import { UpdateHostClassService } from '../../shared/update-host-class.service';
+import { startWith } from 'rxjs/operators';
 
 export type ThyListSize = 'sm' | 'md' | 'lg';
 
@@ -106,7 +107,7 @@ export class ThySelectionListComponent
         this.isLayoutGrid = value === 'grid';
     }
 
-    @Input() thyDefaultHover: boolean;
+    @Input() thyFirstItemDefaultActive: boolean;
 
     @Input() set thySize(value: ThyListSize) {
         this._setListSize(value);
@@ -382,8 +383,8 @@ export class ThySelectionListComponent
 
     ngAfterContentInit(): void {
         this._initializeFocusKeyManager();
-        this.options.changes.subscribe(() => {
-            if (this.thyDefaultHover) {
+        this.options.changes.pipe(startWith(true)).subscribe(() => {
+            if (this.thyFirstItemDefaultActive) {
                 if (!this._keyManager.activeItem || this.options.toArray().indexOf(this._keyManager.activeItem) < -1) {
                     this._keyManager.setFirstItemActive();
                 }