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

[virtualizer] Size changes should not result in item updates #7238

Open
vursen opened this issue Mar 19, 2024 · 1 comment
Open

[virtualizer] Size changes should not result in item updates #7238

vursen opened this issue Mar 19, 2024 · 1 comment

Comments

@vursen
Copy link
Contributor

vursen commented Mar 19, 2024

Description

Follow-up to #7205

Currently, virtualizer size changes trigger an update for every visible item in the viewport and sometimes even for those that are outside. This update is unnecessary because the change of the list size cannot affect the content of the list items.

Expected outcome

The updateElement function should not be invoked on size change.

Minimal reproducible example

<script type="module" src="./common.js"></script>
<script type="module">
  import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';

  const scrollTarget = document.querySelector('#scroll-target');
  const scrollContainer = document.querySelector('#scroll-container');

  const virtualizer = new Virtualizer({
    createElements: (count) => [...Array(count)].map(() => document.createElement('div')),
    updateElement: (el, index) => {
      console.warn('updateElement', index);
      el.style.left = '0';
      el.style.right = '0';
      el.style.display = 'flex';
      el.style.alignItems = 'center';
      el.style.background = index % 2 === 0 ? '#DCDCDC' : '#C0C0C0';
      el.style.height = '30';
      el.style.padding = '0 10px';
      el.textContent = `Item ${index}`;
    },
    scrollTarget,
    scrollContainer,
  });

  virtualizer.size = 100000;

  const decreaseSizeButton = document.querySelector('.decrease-size');
  decreaseSizeButton.addEventListener('click', () => {
    virtualizer.size = 50000;
  });

  const increaseSizeButton = document.querySelector('.increase-size');
  increaseSizeButton.addEventListener('click', () => {
    virtualizer.size = 150000;
  });
</script>

<button class="decrease-size">Decrease size</button>

<button class="increase-size">Increase size</button>

<div style="height: 400px;" id="scroll-target">
  <div id="scroll-container"></div>
</div>

Steps to reproduce

  1. Scroll the list a bit down
  2. Click "Increase size" and see updateElement messages in the console log.
  3. Click "Decrease size" and see updateElement messages in the console log.

Environment

Vaadin version(s): 24.4
OS:

Browsers

No response

@vursen
Copy link
Contributor Author

vursen commented Mar 19, 2024

The update appears to be associated with the scroll restoration in the size setter.

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

No branches or pull requests

1 participant