Added support for select highlighting active item

edcarroll · Mar 22, 2017 · 041aa70 · 041aa70
1 parent 8cf6014
commit 041aa70
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/components/select/select-base.ts b/components/select/select-base.ts
@@ -146,7 +146,7 @@ export abstract class SuiSelectBase<T, U> implements AfterContentInit {
         this._renderedOptions.changes.subscribe(() => this.onAvailableOptionsRendered());
     }
 
-    private onAvailableOptionsRendered() {
+    protected onAvailableOptionsRendered() {
         // Unsubscribe from all previous subscriptions to avoid memory leaks on large selects.
         this._renderedSubscriptions.forEach(rs => rs.unsubscribe());
         this._renderedSubscriptions = [];

diff --git a/components/select/select-option.ts b/components/select/select-option.ts
@@ -5,6 +5,7 @@ export type PropertyReader<T> = (obj:T) => string;
 
 export interface ISelectRenderedOption<T> {
     value:T;
+    isActive?:boolean;
     readLabel:PropertyReader<T>;
     usesTemplate:boolean;
     templateSibling:ViewContainerRef;
@@ -29,6 +30,9 @@ export class SuiSelectOption<T> extends SuiDropdownMenuItem implements ISelectRe
     @Output()
     public onSelected:EventEmitter<T>;
 
+    @HostBinding('class.active')
+    public isActive:boolean;
+
     // Returns the label from a given value.
     public readLabel:(obj:T) => string;
 
@@ -44,6 +48,7 @@ export class SuiSelectOption<T> extends SuiDropdownMenuItem implements ISelectRe
         super(renderer, element);
 
         this._optionClasses = true;
+        this.isActive = false;
         this.onSelected = new EventEmitter<T>();
 
         // By default we make this function return an empty string, for the brief moment when it isn't displaying the correct label.

diff --git a/components/select/select.ts b/components/select/select.ts
@@ -1,6 +1,7 @@
 import {Component, ViewContainerRef, ViewChild, Output, EventEmitter, ElementRef, Renderer, forwardRef, Directive} from '@angular/core';
 import {SuiSelectBase} from './select-base';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
+import {ISelectRenderedOption} from './select-option';
 
 @Component({
     selector: 'sui-select',
@@ -75,6 +76,8 @@ export class SuiSelect<T, U> extends SuiSelectBase<T, U> {
         this.searchService.updateQueryDelayed("");
 
         this.drawSelectedOption();
+        // Adds the active property to the items.
+        this.onAvailableOptionsRendered();
 
         // Automatically refocus the search input for better keyboard accessibility.
         this.focusInput();
@@ -95,6 +98,13 @@ export class SuiSelect<T, U> extends SuiSelectBase<T, U> {
         this.drawSelectedOption();
     }
 
+    protected initialiseRenderedOption(option:ISelectRenderedOption<T>) {
+        super.initialiseRenderedOption(option);
+
+        // Boldens the item so it appears selected in the dropdown.
+        option.isActive = option.value == this.selectedOption;
+    }
+
     private drawSelectedOption() {
         if (this.selectedOption && this.optionTemplate) {
             this.drawTemplate(this._optionTemplateSibling, this.selectedOption);