fix(core): fix restore form callback data

Author: Sukaato

packages/core/src/components/checkbox/checkbox.tsx

@@ -162,8 +162,15 @@ export class Checkbox implements ComponentInterface {
     this.checked = this.initialState;
   }
 
-  formStateRestoreCallback(state: string): void {
-    this.checked = state === 'true';
+  formStateRestoreCallback(state: FormData | string): void {
+    if (typeof state === 'string') {
+      this.checked = state === 'true';
+      return;
+    }
+
+    const value = state.get(this.name);
+    this.value = value?.toString() || 'on';
+    this.checked = true;
   }
 
   connectedCallback(): void {

packages/core/src/components/checkbox/tests/form/index.html

@@ -41,9 +41,9 @@
       <h2>Checkbox - form</h2>
       <div>
         <form>
-          <pop-checkbox name="custom" error-text="test error">input label</pop-checkbox>
-          <pop-checkbox name="custom-value" checked error-text="test error">input label</pop-checkbox>
-          <pop-checkbox name="custom-value" indeterminate error-text="test error">input label</pop-checkbox>
+          <pop-checkbox name="default" error-text="test error">input label</pop-checkbox>
+          <pop-checkbox name="checked" checked error-text="test error">input label</pop-checkbox>
+          <pop-checkbox name="indeterminate" indeterminate="true" error-text="test error">input label</pop-checkbox>
           <input type="checkbox" name="native">
           <pop-button type="submit" color="primary">submit</pop-button>
           <pop-button type="reset" color="ghost">reset</pop-button>

packages/core/src/components/input-file/input-file.tsx

@@ -165,8 +165,8 @@ export class InputFile implements ComponentInterface, FormAssociatedInterface {
     this.nativeInput.value = '';
   }
 
-  formStateRestoreCallback(state: File): void {
-    this.value = state;
+  formStateRestoreCallback(state: FormData): void {
+    this.value = (state.get(this.name) as File) || new File([], '');
   }
 
   connectedCallback(): void {

packages/core/src/components/input/input.tsx

@@ -313,8 +313,8 @@ export class Input implements ComponentInterface, FormAssociatedInterface {
     this.value = this.initialValue;
   }
 
-  formStateRestoreCallback(state: string): void {
-    this.value = state;
+  formStateRestoreCallback(state: FormData): void {
+    this.value = state.get(this.name)?.toString() || '';
   }
 
   connectedCallback(): void {

packages/core/src/components/input/tests/form/index.html

@@ -43,6 +43,7 @@ <h2>Input - form</h2>
         <form>
           <pop-input type="text" name="custom" error-text="test error">input label</pop-input>
           <pop-input type="text" value="default" name="custom-value" error-text="test error">input label</pop-input>
+          <pop-input type="text" name="custom-value" auto-complete="name">input label</pop-input>
           <input type="text" name="native">
           <pop-button type="submit" color="primary">submit</pop-button>
           <pop-button type="reset" color="ghost">reset</pop-button>

packages/core/src/components/radio-group/radio-group.tsx

@@ -129,8 +129,8 @@ export class RadioGroup implements ComponentInterface {
     this.value = this.initialValue;
   }
 
-  formStateRestoreCallback(state: string): void {
-    this.value = state;
+  formStateRestoreCallback(state: FormData): void {
+    this.value = state.get(this.name) as any;
   }
 
   connectedCallback(): void {

packages/core/src/components/range/range.tsx

@@ -153,8 +153,9 @@ export class Range implements ComponentInterface {
     this.value = this.initialValue;
   }
 
-  formStateRestoreCallback(state: string) {
-    this.value = +state;
+  formStateRestoreCallback(state: FormData): void {
+    const value = Number(state.get(this.name));
+    this.value = Number.isNaN(value) ? this.max / 2 : value;
   }
 
   connectedCallback(): void {

packages/core/src/components/select/select.tsx

@@ -226,8 +226,13 @@ export class Select implements ComponentInterface, FormAssociatedInterface {
     this.value = this.initialValues;
   }
 
-  formStateRestoreCallback(state: any) {
-    this.value = state;
+  formStateRestoreCallback(state: FormData): void {
+    const value = state.get(this.name);
+    if (value?.toString().includes(',') && this.multiple) {
+      this.value = value.toString().split(',');
+      return;
+    }
+    this.value = value;
   }
 
   connectedCallback(): void {

packages/core/src/components/textarea/textarea.tsx

@@ -271,8 +271,8 @@ export class Textarea implements ComponentInterface, FormAssociatedInterface {
     this.value = this.initialValue;
   }
 
-  formStateRestoreCallback(state: string): void {
-    this.value = state;
+  formStateRestoreCallback(state: FormData): void {
+    this.value = state.get(this.name)?.toString() || '';
   }
 
   connectedCallback(): void {

packages/core/src/components/toggle/toggle.tsx

@@ -155,8 +155,15 @@ export class Toggle implements ComponentInterface, FormAssociatedInterface {
     this.checked = this.initialState;
   }
 
-  formStateRestoreCallback(state: string): void {
-    this.checked = state === 'true';
+  formStateRestoreCallback(state: FormData | string): void {
+    if (typeof state === 'string') {
+      this.checked = state === 'true';
+      return;
+    }
+
+    const value = state.get(this.name);
+    this.value = value?.toString() || 'on';
+    this.checked = true;
   }
 
   connectedCallback(): void {

packages/core/tsconfig.json

@@ -4,7 +4,7 @@
     "allowUnreachableCode": false,
     "declaration": false,
     "experimentalDecorators": true,
-    "lib": ["dom", "es2023", "ESNext.Disposable"],
+    "lib": ["dom", "DOM.Iterable", "es2023", "ESNext.Disposable"],
     "moduleResolution": "node",
     "module": "esnext",
     "target": "es2021",