[compareWith] for working with objects in mbsc-select?

Select pickers & dropdowns
1

Hi, I’ve a select picker in a popup which is populated via an array. When opening the popup I want to show the previous selected entry as a preselect with the [defaultSelection].

<mbsc-select [(ngModel)]="audit.responsible" [data]="company.users?.auditors" [defaultSelection]="audit.responsible">
</mbsc-select>

The “company.users.auditors”-data is structured this way:
{ text: 'name', value: {name:'...', email:'...'} }
(I want to pass an object)

The problem is now, that if I save my selection, close the popup and reopen the popup to edit my data it is always the first entry of company.users.auditors preselected. In angular/ionic the [compareWith] gets the work with the objects done. Is there a way to deal with objects and the mbsc-select ?

2

The MbscSelect uses object identity to compare values, so you will need the same object in the data and in the selected value. Does your data array change between opening and closing the popup?

3

“valueEquality” is not helpful? ( just saw in source codes )

4

Hi guys, any update on this one?

5

any information guys ?
cheers

6

Hi @Naeim,

Thanks for the follow-up. Unfortunately I don’t understand your question fully. As I previously stated, the mbsc-select uses object identity when comparing data values and the selected value. May I ask what exactly is the problem you are facing?

1 Like
7

Thanks @Zoli . something similar to “compareWith” here Angular Material UI component library

usecase:
I have a select component which loads options from an endpoint. Then, I have another endpoint to get previously selected options.

So while I’m populating the select component (default selection) the object identity doesn’t work because the selected values are from a different source ( has a different object identity ).
Other select components from other libs (like Angular, Ionic, … ) accept a callback method (compareWith) to override the comparison behavoiur which is very useful while dealing with Objects. You can have your own custom logic instead of object equality.
Please let me know if you need more clarification
cheers

8

Thanks @Naeim for the details. Currently there is no built in solution like the [compareWith] you mentioned.

The solution that can work in your use case:
After both the data array and the selectedValue object is queried from the different sources, you can do a search (with your comparison) of the selectedValue on the data array, and use the found object as the selected value instead the one acquired in the first place.

Let me know if that makes sense!

9

Thanks for the reply. yeah it works and it’s what we are doing right now.

It just doesn’t look like a clean way. Unfortunately, we need to implement extra logic everywhere we use select component ( might be easier to implement just one time in select component, similar to many other select components from different libs )