docs(solid-form): onChange listener -> onInput

docs/framework/solid/guides/basic-concepts.md

@@ -239,7 +239,7 @@ Example:
                         name={field().name}
                         value={field().state.value}
                         onBlur={field().handleBlur}
-                        onChange={(e) => field().handleChange(e.target.value)}
+                        onInput={(e) => field().handleChange(e.target.value)}
                       />
                       <button
                         type="button"
@@ -261,7 +261,7 @@ Example:
                           name={field().name}
                           value={field().state.value}
                           onBlur={field().handleBlur}
-                          onChange={(e) => field().handleChange(e.target.value)}
+                          onInput={(e) => field().handleChange(e.target.value)}
                         />
                       </div>
                     );

docs/framework/solid/guides/validation.md

@@ -31,7 +31,7 @@ Here is an example:
         name={field().name}
         value={field().state.value}
         type="number"
-        onChange={(e) => field().handleChange(e.target.valueAsNumber)}
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
       />
       {field().state.meta.errors ? (
         <em role="alert">{field().state.meta.errors.join(', ')}</em>
@@ -61,8 +61,8 @@ In the example above, the validation is done at each keystroke (`onChange`). If,
         type="number"
         // Listen to the onBlur event on the field
         onBlur={field().handleBlur}
-        // We always need to implement onChange, so that TanStack Form receives the changes
-        onChange={(e) => field().handleChange(e.target.valueAsNumber)}
+        // We always need to implement onInput, so that TanStack Form receives the changes
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
       />
       {field().state.meta.errors ? (
         <em role="alert">{field().state.meta.errors.join(', ')}</em>
@@ -93,8 +93,8 @@ So you can control when the validation is done by implementing the desired callb
         type="number"
         // Listen to the onBlur event on the field
         onBlur={field().handleBlur}
-        // We always need to implement onChange, so that TanStack Form receives the changes
-        onChange={(e) => field().handleChange(e.target.valueAsNumber)}
+        // We always need to implement onInput, so that TanStack Form receives the changes
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
       />
       {field().state.meta.errors ? (
         <em role="alert">{field().state.meta.errors.join(', ')}</em>
@@ -246,7 +246,7 @@ To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods
         name={field().name}
         value={field().state.value}
         type="number"
-        onChange={(e) => field().handleChange(e.target.valueAsNumber)}
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
       />
       {field().state.meta.errors ? (
         <em role="alert">{field().state.meta.errors.join(', ')}</em>
@@ -278,7 +278,7 @@ Synchronous and Asynchronous validations can coexist. For example, it is possibl
         value={field().state.value}
         type="number"
         onBlur={field().handleBlur}
-        onChange={(e) => field().handleChange(e.target.valueAsNumber)}
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
       />
       {field().state.meta.errors ? (
         <em role="alert">{field().state.meta.errors.join(', ')}</em>

examples/react/query-integration/src/index.tsx

@@ -20,20 +20,40 @@ function FieldInfo({ field }: { field: AnyFieldApi }) {
   )
 }
 
+class DB {
+  private data: { firstName: string; lastName: string }
+
+  constructor() {
+    this.data = { firstName: 'FirstName', lastName: 'LastName' }
+  }
+
+  getData(): { firstName: string; lastName: string } {
+    return { ...this.data }
+  }
+
+  async saveUser(value: { firstName: string; lastName: string }) {
+    this.data = value
+    return value
+  }
+}
+
+// Dummy Database to emulate server-side actions
+// This will show you the robustness of react-query integration
+const db = new DB()
+
 export default function App() {
-  const { data, isLoading } = useQuery({
+  const { data, isLoading, refetch } = useQuery({
     queryKey: ['data'],
     queryFn: async () => {
       await new Promise((resolve) => setTimeout(resolve, 1000))
-      return { firstName: 'FirstName', lastName: 'LastName' }
+      return db.getData()
     },
   })
 
   const saveUserMutation = useMutation({
     mutationFn: async (value: { firstName: string; lastName: string }) => {
       await new Promise((resolve) => setTimeout(resolve, 1000))
-      console.log(value)
-      return value
+      db.saveUser(value)
     },
   })
 
@@ -42,9 +62,15 @@ export default function App() {
       firstName: data?.firstName ?? '',
       lastName: data?.lastName ?? '',
     },
-    onSubmit: async ({ value }) => {
+    onSubmit: async ({ formApi, value }) => {
       // Do something with form data
       await saveUserMutation.mutateAsync(value)
+
+      // Invalidating query to recheck fresh data
+      await refetch()
+
+      // Reset the form to start-over with a clean state
+      formApi.reset()
     },
   })