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

Virtual Scroll Plugin scrolls to top when next url loads #556

Closed
JackAtOmenApps opened this issue Jan 19, 2023 · 7 comments · May be fixed by #821
Closed

Virtual Scroll Plugin scrolls to top when next url loads #556

JackAtOmenApps opened this issue Jan 19, 2023 · 7 comments · May be fixed by #821
Labels
bug Something isn't working stale No activity

Comments

@JackAtOmenApps
Copy link

Describe the bug
Each time nextUrl loads on the Virtual Scroll examples on the tom-select website, the select scrolls all the way back to the top of results, which is a frustrating user experience.

To Reproduce
View Virtual Scroll examples at https://tom-select.js.org/plugins/virtual_scroll/ or https://tom-select.js.org/plugins/ and scroll far enough to load more than one url's worth of options.

Expected behavior
The new content is appended, and user can scroll from the position which used to be the bottom (and is now the top of the new set of results).

Additional context
Add any other context about the problem here.

  • Ubuntu 22.04
  • 108.0.5359.124 (Official Build) (64-bit)
  • Version used on tom-select website
  • Laptop
@JackAtOmenApps JackAtOmenApps added the bug Something isn't working label Jan 19, 2023
@JackAtOmenApps
Copy link
Author

For comparison, using Chrome in Android it works properly.

@skerit
Copy link

skerit commented Mar 21, 2023

This is how I'm currently working around this, in my load method:

	let dropdown = document.getElementById('global-search-ts-dropdown');

	if (query != last_query) {
		last_scroll_position = 0;
	} else if (dropdown) {
		last_scroll_position = dropdown.scrollTop;
	}

	last_query = query;

Then I do all my ajax loading. After I've executed the callback, I set the scrollTop again:

callback(res.list);
dropdown.scrollTop = last_scroll_position;

@github-actions
Copy link

This issue has not been active in 120 days and has been marked "stale". Remove stale label or comment or this will be closed in 15 days

@github-actions github-actions bot added the stale No activity label Oct 28, 2023
@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Nov 12, 2023
@Actionb
Copy link

Actionb commented Jan 31, 2024

This is still an issue in version 2.3.4

The workaround that I currently use monkeypatches scrollToOption to not do anything until the callback has done its thing.

      fetch(url)
        .then(response => response.json())
        .then(json => {
          const _scrollToOption = this.scrollToOption
          this.scrollToOption = () => {}
          callback(json.results)
          this.scrollToOption = _scrollToOption

@adaniello
Copy link

No news about this issue?

@MatTheCat
Copy link

Tracked this one down to same_query in refreshOptions: when it is called following new options being added its value almost always is false, which is wrong since the query didn’t change. The result is that the first option is considered the active one, and scrolled to.

@adaniello
Copy link

@skerit can you share your solution, please?
Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working stale No activity
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants