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

autoHeight VirtualList wrong heights when filtered #4168

Closed
lokpro opened this issue Apr 28, 2023 · 0 comments
Closed

autoHeight VirtualList wrong heights when filtered #4168

lokpro opened this issue Apr 28, 2023 · 0 comments

Comments

@lokpro
Copy link

lokpro commented Apr 28, 2023

Describe the bug

autoHeight VirtualList calcs wrong heights when filtered.

  • Framework7 version: v6(since autoHeight) to latest

How to reproduce

open the demo and do some searches:
https://codesandbox.io/p/sandbox/upbeat-leaf-k22836?file=%2Fsrc%2Fjs%2Fapp.js&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A19%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A19%7D%5D

can see wrong heights of rows
image
image

code fix suggestion

const renderedItem = renderedItems[i];

The i here should be replaced with value of data-virtual-list-index to fix the problem.

I've tried injecting this function in my demo app. it seems the problem can be fixed.

Framework7.VirtualList.prototype.setListSize = function(autoHeightRerender) {
	const vl = this;
	const items = vl.filteredItems || vl.items;
	if (!autoHeightRerender) {
		vl.pageHeight = vl.$scrollableParentEl[0].offsetHeight;
	}
	if (vl.dynamicHeight) {
		vl.listHeight = 0;
		vl.heights = [];
		for (let i = 0; i < items.length; i += 1) {
			const itemHeight = vl.params.height(items[i]);
			vl.listHeight += itemHeight;
			vl.heights.push(itemHeight);
		}
	} else if (vl.autoHeight) {
		vl.listHeight = 0;
		if (!vl.heights) vl.heights = [];
		if (!vl.heightsCalculated) vl.heightsCalculated = [];
		const renderedItems = {};
		vl.$itemsWrapEl.find(`[data-virtual-list-index]`).forEach((el) => {
			renderedItems[parseInt(el.getAttribute('data-virtual-list-index'), 10)] = el;
		});
		for (let i = 0; i < items.length; i += 1) {
			const virtualListIndex = items[i].virtualListIndex;  // <<<<<<<<<<
			const renderedItem = renderedItems[virtualListIndex]; // <<<<<<<<
			if (renderedItem) {
				if (!vl.heightsCalculated.includes(i)) {
					vl.heights[i] = renderedItem.offsetHeight;
					vl.heightsCalculated.push(i);
				}
			}
			if (typeof vl.heights[i] === 'undefined') {
				vl.heights[i] = 40;
			}
			vl.listHeight += vl.heights[i];
		}
	} else {
		vl.listHeight = Math.ceil(items.length / vl.params.cols) * vl.params.height;
		vl.rowsPerScreen = Math.ceil(vl.pageHeight / vl.params.height);
		vl.rowsBefore = vl.params.rowsBefore || vl.rowsPerScreen * 2;
		vl.rowsAfter = vl.params.rowsAfter || vl.rowsPerScreen;
		vl.rowsToRender = vl.rowsPerScreen + vl.rowsBefore + vl.rowsAfter;
		vl.maxBufferHeight = (vl.rowsBefore / 2) * vl.params.height;
	}

	if (vl.updatableScroll || vl.params.setListHeight) {
		vl.$itemsWrapEl.css({ height: `${vl.listHeight}px` });
	}
}

However, data-virtual-list-index in items is only available in my program, so this may need to be rewritten.

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

No branches or pull requests

1 participant