We have a dropdown with 2000+ items (should it even be a dropdown?) with the ability to search. And it's a tree select dropdown.
The problem arises when one wants to edit i.e. a value was already selected and now one needs to change. Ideally on clicking the dropdown, it should scroll to the section with the selected value. Considering there are 2000+ items in a tree structure, we paginate the data. We have two options at this point
Load all the data first and scroll down to the selected section before enabling the dropdown (it's in the loading state), which would take about 15 seconds, and then scroll down to the selected section
Load the dropdown component quick but it doesn't open with the section showing the selected value but rather at the top of the dropdown
We've introduced a middle ground solution: We populate the search with the selected value and show the results. This way there is a higher chance that the user will see the selected value without having the wait for the component to load (case 1). It works to an extent with the hypothesis that the user would want to change the value of the dropdown only in instances that they selected the wrong value by mistake and even the first selection they made would have been via search.
With the middle ground solution, we have a new problem - we have other drop downs with much less data as well as the pre-population of search does not make sense as they want to fundamentally select a completely different option.
What's the best way forward with this? Anyone face a similar problem before?