fix(file-input): remove value state in file input

.changeset/chilly-signs-work.md

@@ -0,0 +1,6 @@
+---
+"@tapsioss/web-components": patch
+---
+
+Resolve issues related to setting files and value in file-input.
+

packages/web-components/src/file-input/Validator.ts

@@ -21,11 +21,20 @@ class FileInputValidator extends Validator<FileInputState> {
     if (!this._control) {
       // Lazily create the platform input
       this._control = document.createElement("input");
-      this._control.type = "text";
+      this._control.type = "file";
     }
 
-    this._control.required = state.required;
-    this._control.value = state.value;
+    if (!state.value && state.required) {
+      const shadowControl = document.createElement("input");
+
+      shadowControl.type = "text";
+      shadowControl.required = true;
+
+      return {
+        validity: this._control.validity,
+        validationMessage: this._control.validationMessage,
+      };
+    }
 
     return {
       validity: this._control.validity,

packages/web-components/src/file-input/file-input.style.ts

@@ -93,9 +93,14 @@ const styles: CSSResult = css`
     cursor: pointer;
 
     position: absolute;
-
-    inset: 0;
-    z-index: 1;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1;
+    border: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
   }
 
   .input:focus-visible + .file-input {

packages/web-components/src/file-input/file-input.test.ts

@@ -8,10 +8,19 @@ import {
   setupMocks,
   test,
 } from "@internals/test-helpers";
+import type { Locator } from "@playwright/test";
 import * as path from "path";
 import { ErrorMessages, scope } from "./constants.ts";
 
 describe("🧩 file-input", () => {
+  const getSelectedFiles = async (fileInput: Locator): Promise<number> => {
+    return await fileInput
+      .evaluateHandle((el: HTMLInputElement) => {
+        return el.files?.length ?? 0;
+      })
+      .then(handle => handle.jsonValue());
+  };
+
   afterEach(async ({ page }) => {
     await disposeMocks(page);
   });
@@ -186,7 +195,7 @@ describe("🧩 file-input", () => {
     const fileInput = page.getByTestId("test-file-input");
 
     // At first, no files are selected.
-    await expect(fileInput).toHaveJSProperty("files", null);
+    expect(await getSelectedFiles(fileInput)).toBe(0);
 
     const fileChooserPromise = page.waitForEvent("filechooser");
 
@@ -195,7 +204,7 @@ describe("🧩 file-input", () => {
 
     // if we reach here, it means the file input has been opened!
     await fileChooser.setFiles(path.resolve("src", "file-input", "index.ts"));
-    await expect(fileInput).not.toHaveJSProperty("files", null);
+    expect(await getSelectedFiles(fileInput)).toBe(1);
 
     // We should show to user the file name when it's not an image.
     const previewSection = page.locator("tapsi-file-input .text");
@@ -214,7 +223,7 @@ describe("🧩 file-input", () => {
     const fileInput = page.getByTestId("test-file-input");
 
     // At first, no files are selected.
-    await expect(fileInput).toHaveJSProperty("files", null);
+    expect(await getSelectedFiles(fileInput)).toBe(0);
 
     const fileChooserPromise = page.waitForEvent("filechooser");