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

UiSelect: disable scroll to top when using multiple #439

Open
wants to merge 1 commit into
base: next
Choose a base branch
from
Open

UiSelect: disable scroll to top when using multiple #439

wants to merge 1 commit into from

Conversation

plakak
Copy link
Contributor

@plakak plakak commented Mar 5, 2019

Fixes #437.

Each time filteredOptions returns a new object the watcher is fired and scrolls to the top.

As far as I can tell this behavior is desirable mostly when using search (especially async). When new items are fetched scroll should return to the top. It might be desirable in some other situations with custom filters.

But I can't see any use case of scroll to top when multiple is chosen. I've excluded it in that scenario.

@JosephusPaye
Copy link
Owner

JosephusPaye commented Mar 6, 2019

Hi @plakak,

Thanks for the PR.

I think we reset the highlighted option (and scroll) because the current highlighted option may not be available after the filter.

So if highlightedIndex is not reset, it'll highlight a new option that's in the same position after the filter. We also could possibly have a out-of-bounds array access if the highlightedIndex is greater than the number of items after the filter, and the user presses ENTER to select the highlighted item.

We may need to find a way to prevent filteredOptions from re-evaluating to a new array on select, so the scroll doesn't reset.

@plakak
Copy link
Contributor Author

plakak commented Mar 6, 2019

Hi @JosephusPaye,

After a long debugging session I found the problem. Apparently if one adds object directly in the template like this

 <ui-select
        label="Favourite colours"
        multiple
        :keys="{label: 'label', value: 'value'}"
        :options="colours"
         v-model="select7"
></ui-select>

on each model change vue recreates this object and prop gets updated. I've tested this on a simple component of my own and it happens. If one would get keys from data like :keys="myKeys" than everything is fine.

Since it's really convenient to add keys directly in the template I think the library should walkaround this -compare keys internally and change them only if the value changed and not just reference.
I updated the PR.

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

Successfully merging this pull request may close these issues.

UISelect: when using multiple & keys props list gets scrolled to top after select
2 participants