In the Vue MultiColumn ComboBox, when enableVirtualization is set to true, an error occurs if you scroll using the mouse and then try to select or ent

In the Vue MultiColumn ComboBox, when enableVirtualization is set to true, an error occurs if you scroll using the mouse and then try to select or enter data. After selecting data, the input field appears blank, and an error is triggered.

In the Vue MultiColumn ComboBox, when enableVirtualization is set to true, an error occurs if you scroll using the mouse and then try to select or enter data. After selecting data, the input field appears blank, and an error is triggered.

[Indrajith Srinivasan]

Hi Zhong,

Sorry for the inconvenience caused,

We have checked the reported issue and we confirmed that “Issue with data loading when selecting a value using mouse scroll and trying to filter values in the input field” is a bug from our end. The fix will be included in our upcoming weekly patch release scheduled for 19^th November 2024.

You can track the status of the bug report through this feedback link:

https://www.syncfusion.com/feedback/63064
 

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards,

Indrajith

[Vigneshwaran Govindharajan]

Hi Zhong,

Thanks for your patience,

We have resolved the issue with “Data loading when selecting a value using mouse scroll and trying to filter values in the input field” in the multicolumn combobox component and included it in our weekly release (v27.2.3). Please upgrade our packages to the latest version to resolve the reported issue.

Sample:- link

Root cause analysis (RCA):

Previously, in virtualization, the scrollbar stayed at its previous position after scrolling. When filtering and selecting values, the filtered data will be loaded at the top but the scrollbar remained in its previous position, making the data seem missing. We’ve now resolved the issue by updating the scrollbar, based on the filtered values now the data will be loaded properly.

Regards,

Vigneshwaran G

The issue has been resolved. Thank you for your help!

[Adrian Scott]

When you encounter an error in the Vue MultiColumn ComboBox after enabling enableVirtualization and using the mouse to scroll, it typically happens due to a conflict between the virtualization logic and the ComboBox's event handling. This can occur because the component may not properly re-render or update its internal state when virtualization is enabled, causing it to lose focus or not register the selection correctly.

Here are a few potential solutions to resolve the issue:

1. Ensure Proper Binding: Double-check that the ComboBox is correctly bound to your model and that the selection event is properly handled. Virtualization can sometimes interfere with how data is bound to the component.
2. Update or Refresh the ComboBox: After scrolling, try calling the refresh() method (if available in your grid or ComboBox component) to ensure it re-renders correctly and reflects the updated list.
3. Limit Virtualization: If the issue persists, consider disabling enableVirtualization temporarily to see if it resolves the problem. This can help isolate the issue and determine if the virtualization setting is the root cause.
4. Check for Updates: Make sure you’re using the latest version of the ComboBox component. Sometimes, these issues are fixed in newer releases or patches.

If these steps don't solve the issue, it may be helpful to consult with a VueJS development company that can offer specialized expertise and work on optimizing your implementation to avoid conflicts between virtualization and user interactions.

4o mini

[Indrajith Srinivasan]

Hi Adrian,

Thank you for your suggestions.

We couldn't determine the exact issue you encountered with the Multicolumn ComboBox when virtualization is enabled. Could you please share a few additional details regarding your query?

• Steps to replicate the issue on our end.
• Code snippets used for the Multicolumn ComboBox component.

The above information will help us validate the reported issue and provide you with better assistance.

Regards,

Indrajith