Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
hoang0308 opened this issue Dec 4, 2024 · 0 comments

Comments

@hoang0308
Copy link

hoang0308 commented Dec 4, 2024

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).
      image

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

    => 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).
    image

    => 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.
    image

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.
    image

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.
    image
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant