fix(textfield): mitigate safari memory leak in textfield

Author: Loredana Spataru

packages/combobox/src/Combobox.ts

@@ -33,7 +33,7 @@ import '@spectrum-web-components/popover/sp-popover.js';
 import '@spectrum-web-components/menu/sp-menu.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
 import '@spectrum-web-components/picker-button/sp-picker-button.js';
-import { Textfield } from '@spectrum-web-components/textfield';
+import { TextfieldBase } from '@spectrum-web-components/textfield';
 import type { Tooltip } from '@spectrum-web-components/tooltip';
 
 import styles from './combobox.css.js';
@@ -50,11 +50,27 @@ export type ComboboxOption = {
  * @slot - Supply Menu Item elements to the default slot in order to populate the available options
  * @slot tooltip - Tooltip to to be applied to the the Picker Button
  */
-export class Combobox extends Textfield {
+export class Combobox extends TextfieldBase {
     public static override get styles(): CSSResultArray {
         return [...super.styles, styles, chevronStyles];
     }
 
+    @property({ type: String })
+    public override set value(value: string) {
+        if (value === this.value) {
+            return;
+        }
+        const oldValue = this._value;
+        this._value = value;
+        this.requestUpdate('value', oldValue);
+    }
+
+    public override get value(): string {
+        return this._value;
+    }
+
+    protected override _value = '';
+
     /**
      * The currently active ComboboxItem descendant, when available.
      */

packages/textfield/src/Textfield.ts

@@ -204,6 +204,17 @@ export class TextfieldBase extends ManageHelpText(
         return this.inputElement;
     }
 
+    private _eventHandlers = {
+        input: this.handleInput.bind(this),
+        change: this.handleChange.bind(this),
+        focus: this.onFocus.bind(this),
+        blur: this.onBlur.bind(this),
+    };
+
+    protected _firstUpdateAfterConnected = false;
+
+    protected abortController?: AbortController;
+
     /**
      * Sets the start and end positions of the current selection.
      *
@@ -316,10 +327,6 @@ export class TextfieldBase extends ManageHelpText(
                 pattern=${ifDefined(this.pattern)}
                 placeholder=${this.placeholder}
                 .value=${this.displayValue}
-                @change=${this.handleChange}
-                @input=${this.handleInput}
-                @focus=${this.onFocus}
-                @blur=${this.onBlur}
                 ?disabled=${this.disabled}
                 ?required=${this.required}
                 ?readonly=${this.readonly}
@@ -351,10 +358,6 @@ export class TextfieldBase extends ManageHelpText(
                 pattern=${ifDefined(this.pattern)}
                 placeholder=${this.placeholder}
                 .value=${live(this.displayValue)}
-                @change=${this.handleChange}
-                @input=${this.handleInput}
-                @focus=${this.onFocus}
-                @blur=${this.onBlur}
                 ?disabled=${this.disabled}
                 ?required=${this.required}
                 ?readonly=${this.readonly}
@@ -389,6 +392,54 @@ export class TextfieldBase extends ManageHelpText(
         super.update(changedProperties);
     }
 
+    public override connectedCallback(): void {
+        super.connectedCallback();
+        this._firstUpdateAfterConnected = true;
+        this.requestUpdate();
+    }
+
+    public override disconnectedCallback(): void {
+        // Cleanup all event listeners and and remove input element from DOM
+        this.abortController?.abort();
+        super.disconnectedCallback();
+    }
+
+    protected firstUpdateAfterConnected(): void {
+        this.abortController = new AbortController();
+        const { signal } = this.abortController;
+
+        this.inputElement.addEventListener(
+            'change',
+            this._eventHandlers['change'],
+            { signal }
+        );
+        this.inputElement.addEventListener(
+            'input',
+            this._eventHandlers['input'],
+            { signal }
+        );
+        this.inputElement.addEventListener(
+            'focus',
+            this._eventHandlers['focus'],
+            { signal }
+        );
+        this.inputElement.addEventListener(
+            'blur',
+            this._eventHandlers['blur'] as EventListener,
+            { signal }
+        );
+    }
+
+    protected override updated(changedProperties: PropertyValues): void {
+        super.updated(changedProperties);
+        // Adding this here instead of firstUpdated because we want to make sure
+        // this is called again on the first update after a previous disconnect
+        if (this._firstUpdateAfterConnected) {
+            this._firstUpdateAfterConnected = false;
+            this.firstUpdateAfterConnected();
+        }
+    }
+
     public checkValidity(): boolean {
         let validity = this.inputElement.checkValidity();
         if (this.required || (this.value && this.pattern)) {
@@ -413,6 +464,9 @@ export class TextfieldBase extends ManageHelpText(
  * @slot negative-help-text - negative help text to associate to your form element when `invalid`
  */
 export class Textfield extends TextfieldBase {
+    @query('#form')
+    public form!: HTMLFormElement;
+
     @property({ type: String })
     public override set value(value: string) {
         if (value === this.value) {
@@ -428,4 +482,46 @@ export class Textfield extends TextfieldBase {
     }
 
     protected override _value = '';
+
+    private handleSubmit(event: Event): void {
+        event.preventDefault();
+        this.dispatchEvent(
+            new Event('submit', {
+                cancelable: true,
+                bubbles: true,
+            })
+        );
+    }
+
+    protected override renderField(): TemplateResult {
+        return html`
+            <form id="form">${super.renderField()}</form>
+        `;
+    }
+
+    public override connectedCallback(): void {
+        super.connectedCallback();
+        this._firstUpdateAfterConnected = true;
+        this.requestUpdate();
+    }
+
+    public override disconnectedCallback(): void {
+        // Cleanup form event listener and remove form element from DOM
+        this.form.removeEventListener('submit', this.handleSubmit.bind(this));
+        this.form.remove();
+        super.disconnectedCallback();
+    }
+
+    protected override firstUpdateAfterConnected(): void {
+        super.firstUpdateAfterConnected();
+        this.form.addEventListener('submit', this.handleSubmit.bind(this));
+    }
+
+    protected override updated(changes: PropertyValues<this>): void {
+        super.updated(changes);
+        if (this._firstUpdateAfterConnected) {
+            this._firstUpdateAfterConnected = false;
+            this.firstUpdateAfterConnected();
+        }
+    }
 }