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));
}