Issues with MultiSelectComponent Using enableVirtualization and dataSource as DataManager (v27.2.2)

[hoang0308]

When I use the MultiSelectComponent with both enableVirtualization and dataSource being an instance of DataManager, I encounter the following issues:

1. Pre-selected values not rendering in the UI:

• If I pre-select values and pass them via the value prop, the component does not render the selected values in the UI. To display these selected values, I have to use a ref and call the refresh method. However, when using refresh, the following problems arise:

  • Scroll position not resetting: After calling refresh, the popup's scroll position does not reset and remains at the previously selected position. However, the data is reloaded from the start, causing the popup to scroll to an empty area (blank data).
    

  • Duplicate selectedListData: When there is a selected list, and I clear all the selections and then refresh, those values get duplicated multiple times.
    

  => To address this, I am customizing the initializeData function as follows:

private customInitializeData(): void {
  if (this.enableVirtualization) {
    this.virtualListInfo = {
      currentPageNumber: undefined,
      direction: undefined,
      sentinelInfo: {},
      offsets: {},
      startIndex: 0,
      endIndex: 0,
    };
    this.scrollPreStartIndex = 0;
    this.previousStartIndex = 0;
    (this as any).selectedListData = undefined;
  }
  this.originalInitializeData();
}

2. Issue with asynchronous dataSource:

• When the dataSource API is asynchronous, if the user clicks quickly to select and open the popup before the API responds, the popup renders as blank (no data).
  

  => I am customizing the showPopup function as follows, but it seems suboptimal. Please address this issue:

private customShowPopup(e: any): void {
  if (
    this.enableVirtualization &&
    this.dataSource instanceof DataManager &&
    this.isRequesting
  ) {
    if (this.tempCountShowPopup < 20) {
      this.tempCountShowPopup++;
      setTimeout(() => this.customShowPopup(e), 100);
      return;
    }
  }
  this.tempCountShowPopup = 0;
  this.originalShowPopup(e);
}

3. Issue with valueTemplate:

• When using valueTemplate, the data received is not as expected. For example, if I set fields={{ text: 'Name', value: 'Id' }}, the data received in the valueTemplate always contains the Id value.

• This issue might only occur when refresh is used, but since I need to use refresh to render the selected values, I cannot confirm how it behaves otherwise.

• It seems that when making an API call to fetch the value, the returned value is not stored in mainData and listData.
  

4. Issues with allowObjectBinding:

• And some issues related to allowObjectBinding. If a pre-selected value lies outside the range of the initial API call (in my case, the first 40 items), the itemTemplate, valueTemplate, onChange, etc., will not receive the expected data. This issue may be similar to issue 3.
  

5. Issue with button clearAll

• When I clear all the selected data, an API call is triggered with a top value of 1000. I find this unnecessary, or if it is required, there should be a configurable value for this. Based on the current code logic, I understand that it uses maximumSelectionLength or defaults to 1000. My server-side API might encounter issues as I do not want to impose a limit on the number of selectable values.
  

[PrinceOliver]

Hi Hoang,

Thank you for reaching out to us.

We have reviewed your query related to the MultiSelect component. The issue mentioned in this GitHub queries has already been resolved in the latest version of the MultiSelect component. Additionally, we have enhanced the component’s performance, particularly with virtualization and DataManager support, and fixed the issue related to dynamically updating value property and allowObjectBinding property in the most recent package update.

We recommend updating your Syncfusion MultiSelect package to the latest version to apply these fixes and improvements.

For your reference, we have prepared a sample based on the details you provided.

Sample link: https://stackblitz.com/edit/react-vfzfzprq?file=index.js

Please let us know if you need further assistance.

Regards,

Prince