fix(select): Manually run change detector when option updates

src/modules/select/classes/select-base.ts

@@ -7,7 +7,7 @@ import { DropdownService, SuiDropdownMenu } from "../../dropdown";
 import { SearchService, LookupFn, FilterFn } from "../../search";
 import { Util, ITemplateRefContext, HandledEvent, KeyCode } from "../../../misc/util";
 import { ISelectLocaleValues, RecursivePartial, SuiLocalizationService } from "../../../behaviors/localization";
-import { SuiSelectOption, ISelectRenderedOption } from "../components/select-option";
+import { SuiSelectOption } from "../components/select-option";
 import { SuiSelectSearch } from "../directives/select-search";
 
 export interface IOptionContext<T> extends ITemplateRefContext<T> {
@@ -150,7 +150,7 @@ export abstract class SuiSelectBase<T, U> implements AfterContentInit {
             this.queryUpdateHook();
             this.updateQuery(query);
             // Update the rendered text as query has changed.
-            this._renderedOptions.forEach(ro => ro.formatter = this.configuredFormatter);
+            this._renderedOptions.forEach(ro => this.initialiseRenderedOption(ro));
 
             if (this.searchInput) {
                 this.searchInput.query = query;
@@ -314,13 +314,15 @@ export abstract class SuiSelectBase<T, U> implements AfterContentInit {
         }
     }
 
-    protected initialiseRenderedOption(option:ISelectRenderedOption<T>):void {
+    protected initialiseRenderedOption(option:SuiSelectOption<T>):void {
         option.usesTemplate = !!this.optionTemplate;
         option.formatter = this.configuredFormatter;
 
         if (option.usesTemplate) {
             this.drawTemplate(option.templateSibling, option.value);
         }
+
+        option.changeDetector.detectChanges();
     }
 
     public abstract selectOption(option:T):void;

src/modules/select/components/multi-select.ts

@@ -2,7 +2,7 @@ import { Component, HostBinding, ElementRef, EventEmitter, Output, Input, Direct
 import { ICustomValueAccessorHost, KeyCode, customValueAccessorFactory, CustomValueAccessor } from "../../../misc/util";
 import { SuiLocalizationService } from "../../../behaviors/localization";
 import { SuiSelectBase } from "../classes/select-base";
-import { ISelectRenderedOption } from "./select-option";
+import { SuiSelectOption } from "./select-option";
 
 @Component({
     selector: "sui-multi-select",
@@ -158,7 +158,7 @@ export class SuiMultiSelect<T, U> extends SuiSelectBase<T, U> implements ICustom
         }
     }
 
-    protected initialiseRenderedOption(option:ISelectRenderedOption<T>):void {
+    protected initialiseRenderedOption(option:SuiSelectOption<T>):void {
         super.initialiseRenderedOption(option);
 
         // Boldens the item so it appears selected in the dropdown.

src/modules/select/components/select-option.ts

@@ -5,22 +5,14 @@ import {
 import { SuiDropdownMenuItem } from "../../dropdown";
 import { HandledEvent } from "../../../misc/util";
 
-export interface ISelectRenderedOption<T> {
-    value:T;
-    isActive?:boolean;
-    formatter:(o:T) => string;
-    usesTemplate:boolean;
-    templateSibling:ViewContainerRef;
-}
-
 @Component({
     selector: "sui-select-option",
     template: `
 <span #templateSibling></span>
 <span [innerHTML]="renderedText"></span>
 `
 })
-export class SuiSelectOption<T> extends SuiDropdownMenuItem implements ISelectRenderedOption<T> {
+export class SuiSelectOption<T> extends SuiDropdownMenuItem {
     // Sets the Semantic UI classes on the host element.
     @HostBinding("class.item")
     private _optionClasses:boolean;
@@ -51,7 +43,7 @@ export class SuiSelectOption<T> extends SuiDropdownMenuItem implements ISelectRe
     @ViewChild("templateSibling", { read: ViewContainerRef })
     public templateSibling:ViewContainerRef;
 
-    constructor(renderer:Renderer2, element:ElementRef) {
+    constructor(renderer:Renderer2, element:ElementRef, public changeDetector:ChangeDetectorRef) {
         // We inherit SuiDropdownMenuItem to automatically gain all keyboard navigation functionality.
         // This is not done via adding the .item class because it isn't supported by Angular.
         super(renderer, element);
@@ -60,8 +52,8 @@ export class SuiSelectOption<T> extends SuiDropdownMenuItem implements ISelectRe
         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.
-        this.formatter = o => "";
+        // By default we make the default text an empty label, for the brief moment when it isn't displaying the correct one.
+        this.renderedText = "";
 
         this.usesTemplate = false;
     }

src/modules/select/components/select.ts

@@ -2,7 +2,7 @@ import { Component, ViewContainerRef, ViewChild, Output, EventEmitter, ElementRe
 import { ICustomValueAccessorHost, customValueAccessorFactory, CustomValueAccessor } from "../../../misc/util";
 import { SuiLocalizationService } from "../../../behaviors/localization";
 import { SuiSelectBase } from "../classes/select-base";
-import { ISelectRenderedOption } from "./select-option";
+import { SuiSelectOption } from "./select-option";
 
 @Component({
     selector: "sui-select",
@@ -122,7 +122,7 @@ export class SuiSelect<T, U> extends SuiSelectBase<T, U> implements ICustomValue
         }
     }
 
-    protected initialiseRenderedOption(option:ISelectRenderedOption<T>):void {
+    protected initialiseRenderedOption(option:SuiSelectOption<T>):void {
         super.initialiseRenderedOption(option);
 
         // Boldens the item so it appears selected in the dropdown.