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

* fix(combobox): remove layout thrash in render 

* perf(sp-combobox): remove layout thrash in render

* chore: merge main

* chore: add changeset

* perf(sp-combobox): incorporate PR feedback

* chore: added fallback to the resizeObserver initialization

---------

Co-authored-by: Ruben Carvalho <[email protected]>
Co-authored-by: Rajdeep Chandra <[email protected]>
Co-authored-by: Rajdeep Chandra <[email protected]>

Author: 4 people

.changeset/every-pigs-chew.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/combobox': patch
+---
+
+Replace the use of offsetWidth with a resizeObserver to avoid unecessary, performance-impacting layout reflows.

packages/combobox/package.json

@@ -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",

packages/combobox/src/Combobox.ts

@@ -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();
     }
@@ -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;
         }
@@ -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
@@ -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 => {
@@ -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();
     }
 

yarn.lock

@@ -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