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

1.14.0-beta3 -Dropdown blanks out when we scroll to the end or we re-open it #2872

Open
rajgodvani725 opened this issue May 17, 2024 · 4 comments
Labels

Comments

@rajgodvani725
Copy link

When we select the dropdown and scroll to the end, it causing the dropdown to totally blank out , same happend when we open the dropdown evenly . CHECK IMAGE - 1

image

to fix this i made following changes and it worked fine.

Screenshot 2024-05-17 132204

@RafaelG18
Copy link

Hello! I have the same problem. I'll apreciate it if you can say to me where i need to apply this change? Cause i can see that you do not get any answer here

@rajgodvani725
Copy link
Author

rajgodvani725 commented May 20, 2024

Hello! I have the same problem. I'll apreciate it if you can say to me where i need to apply this change? Cause i can see that you do not get any answer here

Hey, just download both css and js files. Then open the js file in any IDE (i use vscode). Use prettier to format the file. Then see the line number in 2nd image i have attached. Use those files in your code instead of CDNs.

If still doesn't work let me know i’ll share the files

@RafaelG18
Copy link

Yo! Thanks for the info! I tried your solution but I noticed that even so, if the dropdown has a lot of information, it is not displayed completely. After a few hours debugging with the original file downloaded from the NPM packages, i figured out that is a scrolling problem, so, if you check the configuration options, an option named virtualScroll, it have 600 as default value, you can try setting the value of this option as twice the size of the list that you render in the dropdown and it could work for you, since this worked for me.

@rajgodvani725
Copy link
Author

Yo! Thanks for the info! I tried your solution but I noticed that even so, if the dropdown has a lot of information, it is not displayed completely. After a few hours debugging with the original file downloaded from the NPM packages, i figured out that is a scrolling problem, so, if you check the configuration options, an option named virtualScroll, it have 600 as default value, you can try setting the value of this option as twice the size of the list that you render in the dropdown and it could work for you, since this worked for me.

Hey man!! Happy to hear that your UI is fixed. I would like to suggest that there’s procedure called lazy loading which you can implement to plot the less amount of data into selection and when you scroll down it will add more and remove the existing ones. It works in both ways (scroll up and scroll down) And about the virtualScroll, my list is dynamic and it could have n numbers or dropdown items. So i used lazy loading there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants