Skip to content

fix(combobox): remove layout thrash in render #5538

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.

Sign up for GitHub

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

Merged
Rajdeepc merged 7 commits into from
Jun 18, 2025
Merged

fix(combobox): remove layout thrash in render #5538

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2f6ca61
perf(sp-combobox): remove layout thrash in render
tjgupta Jun 12, 2025
6aa0d2a
chore: merge main
rubencarvalho Jun 12, 2025
54537cf
chore: merge main
rubencarvalho Jun 12, 2025
e29da59
chore: add changeset
rubencarvalho Jun 12, 2025
6e03d92
perf(sp-combobox): incorporate PR feedback
tjgupta Jun 13, 2025
91fb0cc
chore: added fallback to the resizeObserver initialization
Jun 14, 2025
e5abda5
Merge branch 'main' into tjgupta/fix-combobox-perf
Rajdeepc Jun 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/every-pigs-chew.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@spectrum-web-components/combobox': patch
---

Replace the use of offsetWidth with a resizeObserver to avoid unecessary, performance-impacting layout reflows.
1 change: 1 addition & 0 deletions packages/combobox/package.json
View file
Open in desktop
Copy link
Contributor

@github-actions github-actions bot Jun 12, 2025

Choose a reason for hiding this comment

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

🚫 [eslint] <notice/notice> reported by reviewdog 🐶
Missing notice header

https://github.com/adobe/spectrum-web-components/blob/b4e7408e52d59a740837bb750fe801bc1a25bd92/packages/combobox/package.json#L1-L86

Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@
"@spectrum-web-components/picker-button": "1.7.0",
"@spectrum-web-components/popover": "1.7.0",
"@spectrum-web-components/progress-circle": "1.7.0",
"@spectrum-web-components/reactive-controllers": "1.7.0",
"@spectrum-web-components/textfield": "1.7.0"
},
"types": "./src/index.d.ts",
Expand Down
17 changes: 15 additions & 2 deletions packages/combobox/src/Combobox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,11 @@ export class Combobox extends Textfield {

private tooltipEl?: Tooltip;

private resizeObserver?: ResizeObserver | undefined;

@state()
private fieldWidth = 0;

public override focus(): void {
this.focusElement.focus();
}
Expand Down Expand Up @@ -459,7 +464,6 @@ export class Combobox extends Textfield {
}

protected override render(): TemplateResult {
const width = (this.input || this).offsetWidth;
if (this.tooltipEl) {
this.tooltipEl.disabled = this.open;
}
Expand Down Expand Up @@ -510,7 +514,7 @@ export class Combobox extends Textfield {
this.itemValue
? [this.itemValue]
: []}
style="min-width: ${width}px;"
style="min-width: ${this.fieldWidth}px;"
size=${this.size}
>
${this.overlayOpen
Expand Down Expand Up @@ -572,6 +576,13 @@ export class Combobox extends Textfield {
this.focused = false;
}
});
this.resizeObserver = new ResizeObserver(
(entries: ResizeObserverEntry[]) => {
this.fieldWidth = entries[0].borderBoxSize[0].inlineSize;
}
);

this.resizeObserver.observe(this);
}

private _returnItems = (): void => {
Expand Down Expand Up @@ -650,6 +661,8 @@ export class Combobox extends Textfield {
public override disconnectedCallback(): void {
this.itemObserver.disconnect();
this.open = false;
this.resizeObserver?.disconnect();
this.resizeObserver = undefined;
super.disconnectedCallback();
}

Expand Down
1 change: 1 addition & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6676,6 +6676,7 @@ __metadata:
"@spectrum-web-components/picker-button": "npm:1.7.0"
"@spectrum-web-components/popover": "npm:1.7.0"
"@spectrum-web-components/progress-circle": "npm:1.7.0"
"@spectrum-web-components/reactive-controllers": "npm:1.7.0"
"@spectrum-web-components/textfield": "npm:1.7.0"
languageName: unknown
linkType: soft
Expand Down
Loading