Add shouldFocus option to setValue method

fabian-hiller · Nov 8, 2022 · ec09706 · ec09706
1 parent 34c3c2b
commit ec09706
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/packages/solid/CHANGELOG.md b/packages/solid/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to the library will be documented in this file.
 
+## vX.X.X (Month DD, YYYY)
+
+- Add `shouldFocus` option to `setValue` method
+
 ## v0.7.0 (November 08, 2022)
 
 - Add `validateIfNecessary` util and refactor code

diff --git a/packages/solid/src/methods/setValue.ts b/packages/solid/src/methods/setValue.ts
@@ -6,6 +6,7 @@ type ValueOptions = Partial<{
   shouldTouched: boolean;
   shouldDirty: boolean;
   shouldValidate: boolean;
+  shouldFocus: boolean;
 }>;
 
 /**
@@ -30,6 +31,7 @@ export function setValue<
     shouldTouched = true,
     shouldDirty = true,
     shouldValidate = true,
+    shouldFocus = true,
   } = options;
 
   // Ignores tracking of reactive dependencies
@@ -57,7 +59,7 @@ export function setValue<
       if (shouldValidate) {
         validateIfNecessary(form, name, {
           on: 'input',
-          shouldFocus: true,
+          shouldFocus,
         });
       }
     });

diff --git a/packages/website/src/routes/api/setValue.mdx b/packages/website/src/routes/api/setValue.mdx
@@ -21,13 +21,16 @@ setValue(form, name, value, options);
   - `shouldTouched` <Property {...properties.shouldTouched} />
   - `shouldDirty` <Property {...properties.shouldDirty} />
   - `shouldValidate` <Property {...properties.shouldValidate} />
+  - `shouldFocus` <Property {...properties.shouldFocus} />
 
 ### Explanation
 
 By default, the field is set to touched and the dirty state is updated. If you don't want this, you can set `shouldTouched` and/or `shouldDirty` to `false`.
 
 By default, the field is validated according to the rules defined in the `options` of <A href="/api/createForm">`createForm`</A>. To disable validation you can set `shouldValidate` to `false`.
 
+By default, the field is focused when an error occurs during validation. To change this behavior you can set `shouldFocus` to `false`.
+
 ## Return
 
 - `value` <Property {...properties.value} />
@@ -65,4 +68,8 @@ export const properties = {
     type: 'boolean',
     defaultValue: { type: 'boolean', value: true },
   },
+  shouldFocus: {
+    type: 'boolean',
+    defaultValue: { type: 'boolean', value: true },
+  },
 };