npm package diff
Package: @forge/react
Versions: 10.6.1 - 10.6.2-next.0
Modified: package/out/hooks/useForm.js
Index: package/out/hooks/useForm.js
===================================================================
--- package/out/hooks/useForm.js
+++ package/out/hooks/useForm.js
@@ -52,27 +52,28 @@
additionalProps.defaultValue = (0, get_1.default)(defaultValues, fieldName);
}
}
const isError = !!(0, get_1.default)(formState, `errors["${fieldName}"]`);
- const onChangeOptions = {
+ const getOnChangeOptions = () => ({
shouldDirty: true,
+ shouldTouch: true,
// revalidate on change if the field has been touched(blurred) or if the form has been submitted previously
shouldValidate: formState.submitCount > 0 || !!(0, get_1.default)(formState, `touchedFields["${fieldName}"]`)
- };
+ });
return {
...rest,
onChange: (event) => {
// onChange is modified here to handle our controlled components as refs cannot be used
// handles Checkbox and Toggle
if (event?.target?.type === 'checkbox') {
- return Promise.resolve(setValue(fieldName, event.target.checked, onChangeOptions));
+ return Promise.resolve(setValue(fieldName, event.target.checked, getOnChangeOptions()));
}
if (['number', 'text', 'textarea', 'radio', 'password'].includes(event?.target?.type)) {
- return Promise.resolve(setValue(fieldName, event.target.value, onChangeOptions));
+ return Promise.resolve(setValue(fieldName, event.target.value, getOnChangeOptions()));
}
else {
// handles onChange arguments where the value is passed instead of an event object
- return Promise.resolve(setValue(fieldName, event, onChangeOptions));
+ return Promise.resolve(setValue(fieldName, event, getOnChangeOptions()));
}
},
// The onBlur event from `register` is unintentionally setting the value to `undefined` when the field is blurred.
// Replacing the onBlur event here to prevent this behaviour.Modified: package/out/hooks/__test__/useForm.test.js
Index: package/out/hooks/__test__/useForm.test.js
===================================================================
--- package/out/hooks/__test__/useForm.test.js
+++ package/out/hooks/__test__/useForm.test.js
@@ -36,4 +36,14 @@
const fieldProps = register('textfield');
expect(fieldProps.defaultValue).toBe('test');
});
});
+describe('useForm onChange handler', () => {
+ const { result } = (0, react_hooks_1.renderHook)(() => (0, useForm_1.useForm)());
+ it('when onChange is triggered, the field in the form state should be marked as touched', () => {
+ const { register, formState } = result.current;
+ const { onChange } = register('username');
+ expect(formState.touchedFields.username).toBeUndefined();
+ onChange({ target: { value: 'test' } });
+ expect(formState.touchedFields.username).toBe(true);
+ });
+});Modified: package/package.json
Index: package/package.json
===================================================================
--- package/package.json
+++ package/package.json
@@ -1,7 +1,7 @@
{
"name": "@forge/react",
- "version": "10.6.1",
+ "version": "10.6.2-next.0",
"description": "Forge React reconciler",
"author": "Atlassian",
"license": "UNLICENSED",
"main": "out/index.js",Modified: package/out/hooks/useForm.d.ts.map
Index: package/out/hooks/useForm.d.ts.map
===================================================================
--- package/out/hooks/useForm.d.ts.map
+++ package/out/hooks/useForm.d.ts.map
@@ -1,1 +1,1 @@
-{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../src/hooks/useForm.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,eAAe,EACf,qBAAqB,EACtB,MAAM,iBAAiB,CAAC;AAGzB,aAAK,oBAAoB,GAAG,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,GAAG,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,KAAK,IAAI,CAAC;AAElF,aAAK,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,GAAG;IAC7D,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,cAAc,CAAC,EAAE,GAAG,CAAC;CACtB,CAAC;AAEF,wBAAgB,OAAO,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EACpE,KAAK,GAAE,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,eAAe,CAAM;4BAK9B,MAAM;0BAuBxB,UAAU,YAAY,CAAC,YACxB,KACR,gBAAgB,YAAY,EAAE,UAAU,YAAY,CAAC,CAAC,EACtD,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAC7F,KACA,iBAAiB;;;;;;;;;;;;;;;EAuFrB"}
\ No newline at end of file
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../src/hooks/useForm.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,eAAe,EACf,qBAAqB,EACtB,MAAM,iBAAiB,CAAC;AAGzB,aAAK,oBAAoB,GAAG,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,GAAG,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,KAAK,IAAI,CAAC;AAElF,aAAK,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,GAAG;IAC7D,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,cAAc,CAAC,EAAE,GAAG,CAAC;CACtB,CAAC;AAEF,wBAAgB,OAAO,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EACpE,KAAK,GAAE,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,eAAe,CAAM;4BAK9B,MAAM;0BAuBxB,UAAU,YAAY,CAAC,YACxB,KACR,gBAAgB,YAAY,EAAE,UAAU,YAAY,CAAC,CAAC,EACtD,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAC7F,KACA,iBAAiB;;;;;;;;;;;;;;;EAwFrB"}
\ No newline at end of fileModified: package/CHANGELOG.md
Index: package/CHANGELOG.md
===================================================================
--- package/CHANGELOG.md
+++ package/CHANGELOG.md
@@ -1,6 +1,12 @@
# @forge/react
+## 10.6.2-next.0
+
+### Patch Changes
+
+- 5979e47: Fix useForm hook so that field validation and be triggered properly
+
## 10.6.1
### Patch ChangesModified: package/tsconfig.tsbuildinfo
Large diffs are not rendered by default.