From a3315cb7be3ed5a96d7c0f3b612b444b9926030b Mon Sep 17 00:00:00 2001
From: dankeboy36 <dankeboy36@gmail.com>
Date: Tue, 23 Sep 2025 12:59:24 +0200
Subject: [PATCH] fix(textfield): do not bind .value for file inputs

The native file input cannot accept non-empty values programmatically.

Skip mirroring and binding .value for type="file".
Only propagating FileList to form internals.
This prevents InvalidStateError and keeps file selections intact across
renders.

Closes #542

Signed-off-by: dankeboy36 <dankeboy36@gmail.com>
---
 src/vscode-textfield/vscode-textfield.test.ts | 26 +++++
 src/vscode-textfield/vscode-textfield.ts      | 95 ++++++++++++-------
 2 files changed, 89 insertions(+), 32 deletions(-)

diff --git a/src/vscode-textfield/vscode-textfield.test.ts b/src/vscode-textfield/vscode-textfield.test.ts
index 7d1812920..9d7571540 100644
--- a/src/vscode-textfield/vscode-textfield.test.ts
+++ b/src/vscode-textfield/vscode-textfield.test.ts
@@ -277,4 +277,30 @@ describe('vscode-textfield', () => {
 
     expect(el.checkValidity()).to.eq(false);
   });
+
+  it('mirrors a non-empty value into a file input and triggers unhandledrejection (current bug)', async () => {
+    const el = await fixture<VscodeTextfield>(
+      html`<vscode-textfield type="file"></vscode-textfield>`
+    );
+
+    const rejection = new Promise<unknown>((resolve) => {
+      const handler = (ev: PromiseRejectionEvent) => {
+        window.removeEventListener('unhandledrejection', handler);
+        resolve(ev.reason);
+      };
+      window.addEventListener('unhandledrejection', handler);
+    });
+
+    // mimic the behavior of a file input
+    el['_value'] = 'C:\\fakepath\\file.txt';
+
+    el.requestUpdate();
+
+    const result = await Promise.race([
+      rejection,
+      el.updateComplete.then(() => 'update-completed'),
+    ]);
+
+    expect(result).to.equal('update-completed');
+  });
 });
diff --git a/src/vscode-textfield/vscode-textfield.ts b/src/vscode-textfield/vscode-textfield.ts
index 70b11d167..8bbb58494 100644
--- a/src/vscode-textfield/vscode-textfield.ts
+++ b/src/vscode-textfield/vscode-textfield.ts
@@ -303,15 +303,17 @@ export class VscodeTextfield
   private _internals: ElementInternals;
 
   private _dataChanged() {
-    this._value = this._inputEl.value;
-
-    if (this.type === 'file' && this._inputEl.files) {
-      for (const f of this._inputEl.files) {
-        this._internals.setFormValue(f);
+    if (this.type === 'file') {
+      if (this._inputEl.files) {
+        for (const f of this._inputEl.files) {
+          this._internals.setFormValue(f);
+        }
       }
-    } else {
-      this._internals.setFormValue(this._inputEl.value);
+      return;
     }
+
+    this._value = this._inputEl.value;
+    this._internals.setFormValue(this._inputEl.value);
   }
 
   private _setValidityFromInput() {
@@ -354,31 +356,60 @@ export class VscodeTextfield
     return html`
       <div class="root">
         <slot name="content-before"></slot>
-        <input
-          id="input"
-          type=${this.type}
-          ?autofocus=${this.autofocus}
-          autocomplete=${ifDefined(this.autocomplete)}
-          aria-label=${this.label}
-          ?disabled=${this.disabled}
-          max=${ifDefined(this.max)}
-          maxlength=${ifDefined(this.maxLength)}
-          min=${ifDefined(this.min)}
-          minlength=${ifDefined(this.minLength)}
-          ?multiple=${this.multiple}
-          name=${ifDefined(this.name)}
-          pattern=${ifDefined(this.pattern)}
-          placeholder=${ifDefined(this.placeholder)}
-          ?readonly=${this.readonly}
-          ?required=${this.required}
-          step=${ifDefined(this.step)}
-          .value=${this._value}
-          @blur=${this._onBlur}
-          @change=${this._onChange}
-          @focus=${this._onFocus}
-          @input=${this._onInput}
-          @keydown=${this._onKeyDown}
-        >
+        ${this._type === 'file'
+          ? html`
+              <input
+                id="input"
+                type="file"
+                ?autofocus=${this.autofocus}
+                autocomplete=${ifDefined(this.autocomplete)}
+                aria-label=${this.label}
+                ?disabled=${this.disabled}
+                max=${ifDefined(this.max)}
+                maxlength=${ifDefined(this.maxLength)}
+                min=${ifDefined(this.min)}
+                minlength=${ifDefined(this.minLength)}
+                ?multiple=${this.multiple}
+                name=${ifDefined(this.name)}
+                pattern=${ifDefined(this.pattern)}
+                placeholder=${ifDefined(this.placeholder)}
+                ?readonly=${this.readonly}
+                ?required=${this.required}
+                step=${ifDefined(this.step)}
+                @blur=${this._onBlur}
+                @change=${this._onChange}
+                @focus=${this._onFocus}
+                @input=${this._onInput}
+                @keydown=${this._onKeyDown}
+              >
+            `
+          : html`
+              <input
+                id="input"
+                type=${this.type}
+                ?autofocus=${this.autofocus}
+                autocomplete=${ifDefined(this.autocomplete)}
+                aria-label=${this.label}
+                ?disabled=${this.disabled}
+                max=${ifDefined(this.max)}
+                maxlength=${ifDefined(this.maxLength)}
+                min=${ifDefined(this.min)}
+                minlength=${ifDefined(this.minLength)}
+                ?multiple=${this.multiple}
+                name=${ifDefined(this.name)}
+                pattern=${ifDefined(this.pattern)}
+                placeholder=${ifDefined(this.placeholder)}
+                ?readonly=${this.readonly}
+                ?required=${this.required}
+                step=${ifDefined(this.step)}
+                .value=${this._value}
+                @blur=${this._onBlur}
+                @change=${this._onChange}
+                @focus=${this._onFocus}
+                @input=${this._onInput}
+                @keydown=${this._onKeyDown}
+              >
+            `}
         <slot name="content-after"></slot>
       </div>
     `;