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

refactor: replace iron-list with virtualizer in combo-box #2339

Merged
merged 16 commits into from
Sep 6, 2021

Conversation

tomivirkki
Copy link
Member

@tomivirkki tomivirkki commented Aug 13, 2021

Replaces the Polymer-based <iron-list> used for the dropdown items virtual scrolling with the internal virtualizer from <vaadin-virtual-list>.

Certain Flow ComboBox tests and the TB element still expect the <vaadin-combo-box> Web Component to use an <iron-list> internally. There's a branch with necessary changes to ComboBox that needs to be merged together with the Web Component version bump.

@tomivirkki tomivirkki marked this pull request as draft August 13, 2021 14:21
@tomivirkki tomivirkki force-pushed the combo-box-virtualizer branch 3 times, most recently from 7fedaed to 4f5a33c Compare August 27, 2021 13:38
@tomivirkki tomivirkki force-pushed the combo-box-virtualizer branch 2 times, most recently from 4b499b0 to 9584027 Compare August 27, 2021 17:15
@tomivirkki tomivirkki force-pushed the combo-box-virtualizer branch from 9584027 to f5c53c2 Compare September 4, 2021 08:22
Comment on lines -198 to -228
if (this._isNotEmpty(items) && this._selector && !this.filterChanged) {
// iron-list triggers the scroller's reset after items update, and
// this is not appropriate for undefined size lazy loading.
// see https://github.com/vaadin/vaadin-combo-box-flow/issues/386
// We store iron-list scrolling position in order to restore
// it later on after the items have been updated.
const currentScrollerPosition = this._selector.firstVisibleIndex;
if (currentScrollerPosition !== 0) {
this._oldScrollerPosition = currentScrollerPosition;
this._resetScrolling = true;
}
}
// Let the position to be restored in the future calls unless it's not
// caused by filtering
this.filterChanged = false;
return items;
}
return [];
}

_restoreScrollerPosition(items) {
if (this._isNotEmpty(items) && this._selector && this._oldScrollerPosition !== 0) {
// new items size might be less than old scrolling position
this._scrollIntoView(Math.min(items.length - 1, this._oldScrollerPosition));
this._resetScrolling = false;
// reset position to 0 again in order to properly handle the filter
// cases (scroll to 0 after typing the filter)
this._oldScrollerPosition = 0;
}
}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All logic related to restoring the scroll position on items change can be removed from combo-box, because the virtualizer has the same functionality built-in.

@tomivirkki tomivirkki marked this pull request as ready for review September 4, 2021 09:29
Copy link
Member

@web-padawan web-padawan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One more note about cleanup iron-list leftovers.

@web-padawan
Copy link
Member

Let's also update iron-list specific styles to get proper padding around the dropdown items back.

:host {
/* TODO: using a legacy mixin (unsupported) */
--iron-list-items-container: {
border-width: var(--lumo-space-xs);
border-style: solid;
border-color: transparent;
}
}

/* TODO using a legacy mixin (unsupported) */
--iron-list-items-container: {
border-width: 8px 0;
border-style: solid;
border-color: transparent;
}
}

We don't have visual tests for opened combo-box so they didn't catch this 😕 My bad, forgot to add them.

@tomivirkki
Copy link
Member Author

Let's also update iron-list specific styles to get proper padding around the dropdown items back.

Good catch, fixed

@web-padawan
Copy link
Member

Unit tests started to fail after the CSS change which makes me think they should be updated to not use Lumo.

@tomivirkki
Copy link
Member Author

Unit tests started to fail after the CSS change which makes me think they should be updated to not use Lumo.

Yeah, that's probably a nicer fix. The numbers make better sense without Lumo, but it looks nasty which can make it difficult to debug the tests later.

@sonarqubecloud
Copy link

sonarqubecloud bot commented Sep 5, 2021

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@tomivirkki tomivirkki merged commit 836dde9 into master Sep 6, 2021
@tomivirkki tomivirkki deleted the combo-box-virtualizer branch September 6, 2021 05:54
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with platform 22.0.0.alpha3 and is also targeting the upcoming stable 22.0.0 version.

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

Successfully merging this pull request may close these issues.

4 participants