diff --git a/components/select/select-base.ts b/components/select/select-base.ts index 80719930f..e5489c2fa 100644 --- a/components/select/select-base.ts +++ b/components/select/select-base.ts @@ -146,7 +146,7 @@ export abstract class SuiSelectBase 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 index c6e99bcf8..f96b42bb2 100644 --- a/components/select/select-option.ts +++ b/components/select/select-option.ts @@ -5,6 +5,7 @@ export type PropertyReader = (obj:T) => string; export interface ISelectRenderedOption { value:T; + isActive?:boolean; readLabel:PropertyReader; usesTemplate:boolean; templateSibling:ViewContainerRef; @@ -29,6 +30,9 @@ export class SuiSelectOption extends SuiDropdownMenuItem implements ISelectRe @Output() public onSelected:EventEmitter; + @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 extends SuiDropdownMenuItem implements ISelectRe super(renderer, element); this._optionClasses = true; + this.isActive = false; this.onSelected = new EventEmitter(); // 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 index 4ef98d2ee..42a662077 100644 --- 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 extends SuiSelectBase { 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 extends SuiSelectBase { this.drawSelectedOption(); } + protected initialiseRenderedOption(option:ISelectRenderedOption) { + 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);