diff --git a/demo/src/app/pages/modules/select/select.page.ts b/demo/src/app/pages/modules/select/select.page.ts index 84db911aa..8b629be35 100644 --- a/demo/src/app/pages/modules/select/select.page.ts +++ b/demo/src/app/pages/modules/select/select.page.ts @@ -197,6 +197,11 @@ export class SelectPage { "Must return a Promise. " + "This must be defined as an arrow function in your class." }, + { + name: "compareWith", + type: "(o1:U, o2:U) => boolean", + description: "A function to compare two value types, it will be called when searching for values in the options." + }, { name: "labelField", type: "string", diff --git a/src/modules/select/classes/select-base.ts b/src/modules/select/classes/select-base.ts index 10f43eaac..07b1b3d7a 100644 --- a/src/modules/select/classes/select-base.ts +++ b/src/modules/select/classes/select-base.ts @@ -30,6 +30,9 @@ export abstract class SuiSelectBase implements AfterContentInit, OnDestroy // Keep track of all of the subscriptions to the selected events on the rendered options. private _renderedSubscriptions:Subscription[]; + // Method used to compare the type of property of the option used as the value. + private _compareWith:(o1:U, o2:U) => boolean; + // Sets the Semantic UI classes on the host element. @HostBinding("class.ui") @HostBinding("class.dropdown") @@ -132,6 +135,13 @@ export abstract class SuiSelectBase implements AfterContentInit, OnDestroy } } + @Input() + public set compareWith(fn:(o1:U, o2:U) => boolean) { + if (fn) { + this._compareWith = fn; + } + } + public get filteredOptions():T[] { return this.searchService.results; } @@ -331,6 +341,9 @@ export abstract class SuiSelectBase implements AfterContentInit, OnDestroy public abstract selectOption(option:T):void; protected findOption(options:T[], value:U):T | undefined { + if (this._compareWith) { + return options.find(o => this._compareWith(value, this.valueGetter(o))); + } // Tries to find an option in options array return options.find(o => value === this.valueGetter(o)); }