Issues with multi-combobox custom datasource

[ankur-sheelwant]

Is this a bug, enhancement, or feature request?

Bug

Briefly describe your proposal.

Observed these issue while using a MultiComboBoxDataSource as a custom defined data source for Multi-combobox component.

1. Multi-combobox component becomes very slow and sometimes unresponsive. The API response for data is already received. It prints a series of console log statement approximately once for each item in the list as shown in the recording.
2. Previously selected items don't rendered correctly for multi-combobox. The checkbox for these items are selected in the list but they don't show up in input box as selection.

https://user-images.githubusercontent.com/112031085/186535686-47a5b9f1-4b6a-49f4-ad1c-b21d5535bd0a.mov

3. When I do a search query and select multiple items, only the last item is being selected. i wrote customized code for fetch method shown below.

https://user-images.githubusercontent.com/112031085/186538959-25fc5345-2742-4965-b4d8-78127a7e428e.mov

4. Mulit-combobox component throws exception '[dataSource] source did not match an array, Observable, or DataSource' as shown below:

https://user-images.githubusercontent.com/112031085/186537060-c0d290bf-f99b-4794-922b-d1710f2cdbe3.mov

Which versions of Angular and Fundamental Library for Angular are affected? (If this is a feature request, use current version.)

Issues were found on latest release: v 0.35.4

If this is a bug, please provide steps for reproducing it.

Please provide relevant source code if applicable.

Screenshot of custom datasource code:

Is there anything else we should know?

These issues are not observed when we use simple array as a datasource input.

[github-actions[bot]]

Hello @ankur-sheelwant, thank you for using fundamental-ngx! The fundamental-ngx team will triage your issue as soon as possible.

[fkolar]

In term of performance, for this issue, you are loading all the records found in the backend right ?

How many issues we have here? Let's try to isolate them:

• Performance - we can optimize the fetch by setting proper limit on how many records you want to retrieve at once.
• Selection is also a problem?

the #4 the DataSource needs to be type of MultiComboBoxDataSource<T> | Observable<T[]> | T[]

const initDataSource = this._toDataStream(ds);
        let isInitDataSource = true;

        if (initDataSource === undefined) {
            throw new Error(`[dataSource] source did not match an array, Observable, or DataSource`);
        }

You own DataProvider seems fine and the same way for you new instance of MultiComboboxDataSource, can you check what actual type gets into this method?

Or small snippet of code would help too.

 private _toDataStream(source: FdpMultiComboboxDataSource<any>): MultiComboBoxDataSource<any> | undefined {
        if (isDataSource(source)) {
            return source as MultiComboBoxDataSource<any>;
        }

        if (Array.isArray(source)) {
            return new ArrayMultiComboBoxDataSource<any>(source);
        }

        if (isObservable(source)) {
            return new ObservableMultiComboBoxDataSource<any>(source);
        }

        return undefined;
    }

[ankur-sheelwant]

Hi Frank

• we got rid of dataSource exception issue#4
• Performance is still an issue but can be handled with less number of records on initial load
• Selection is the main issue with multi-combobox. The searched records are not selectable as shown in below screen recording.

https://user-images.githubusercontent.com/112031085/188763774-954141d8-59ad-4923-baae-9592d654dedb.mov

I debugged through ngx code as shown in recording and found out that the _selectedSuggestions in fundamental-ngx-platform-form is missing the selected value. This doesn't happen if we select from initially load records. Can you please take a look why the _selectedSuggestions is missing with searched values?

[fkolar]

As already communicated please see this repo to show some workarounds :

• DataProvider should limit number of records retrieved. Whatever number of items you see in the suggestion popover (we don't really need big list)
• There is definitely issue and space for improvement for the selectionChange event, as it is called too many times (4x) it could be optimised. But this is more performance enhancement.
• Debounce should be added to the eventHandler so .match is not called every time we press key
• For the Debounce, please see my workaround in order to improve your performance.

[ankur-sheelwant]

Thank you so much for providing this repo and joining the debug session meeting. As we discussed, this solution will improve performance but still need to look into empty selectedItems in selectioChange event issue. I'll look forward to timeline and fix for this issue. Here's the meeting recording https://sapnam-my.sharepoint.com/:v:/g/personal/frantisek_kolar_sap_com/EVRWk1ZVPJNBmz-brQd3rbwBTHZPTV6FyWir01WGt986Vg?e=DjJJEN

[skaquib123]

Hi @ankur-sheelwant, I believe if we introduce a unique "id" in object to compare values than it will be okay and for that estimated time will be 4 days.