Skip to content

Commit 4ef7fd1

Browse files
pavle99autofix-ci[bot]harry-whorlow
authored
fix(form-core): listen to array onChange events (#1241)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Harry Whorlow <[email protected]>
1 parent 0d26669 commit 4ef7fd1

File tree

3 files changed

+100
-21
lines changed

3 files changed

+100
-21
lines changed

‎docs/reference/classes/fieldapi.md

+15-15
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ Use `field.state.value` instead.
213213
handleBlur(): void
214214
```
215215

216-
Defined in: [packages/form-core/src/FieldApi.ts:1593](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1593)
216+
Defined in: [packages/form-core/src/FieldApi.ts:1632](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1632)
217217

218218
Handles the blur event.
219219

@@ -229,7 +229,7 @@ Handles the blur event.
229229
handleChange(updater): void
230230
```
231231

232-
Defined in: [packages/form-core/src/FieldApi.ts:1586](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1586)
232+
Defined in: [packages/form-core/src/FieldApi.ts:1625](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1625)
233233

234234
Handles the change event.
235235

@@ -251,10 +251,10 @@ Handles the change event.
251251
insertValue(
252252
index,
253253
value,
254-
opts?): Promise<void>
254+
opts?): void
255255
```
256256
257-
Defined in: [packages/form-core/src/FieldApi.ts:1234](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1234)
257+
Defined in: [packages/form-core/src/FieldApi.ts:1241](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1241)
258258
259259
Inserts a value at the specified index, shifting the subsequent values to the right.
260260
@@ -274,7 +274,7 @@ Inserts a value at the specified index, shifting the subsequent values to the ri
274274
275275
#### Returns
276276
277-
`Promise`\<`void`\>
277+
`void`
278278
279279
***
280280
@@ -307,7 +307,7 @@ moveValue(
307307
opts?): void
308308
```
309309
310-
Defined in: [packages/form-core/src/FieldApi.ts:1264](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1264)
310+
Defined in: [packages/form-core/src/FieldApi.ts:1297](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1297)
311311
312312
Moves the value at the first specified index to the second specified index.
313313
@@ -360,10 +360,10 @@ Pushes a new value to the field.
360360
### removeValue()
361361
362362
```ts
363-
removeValue(index, opts?): Promise<void>
363+
removeValue(index, opts?): void
364364
```
365365
366-
Defined in: [packages/form-core/src/FieldApi.ts:1252](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1252)
366+
Defined in: [packages/form-core/src/FieldApi.ts:1273](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1273)
367367
368368
Removes a value at the specified index.
369369
@@ -379,7 +379,7 @@ Removes a value at the specified index.
379379
380380
#### Returns
381381
382-
`Promise`\<`void`\>
382+
`void`
383383
384384
***
385385
@@ -389,10 +389,10 @@ Removes a value at the specified index.
389389
replaceValue(
390390
index,
391391
value,
392-
opts?): Promise<void>
392+
opts?): void
393393
```
394394
395-
Defined in: [packages/form-core/src/FieldApi.ts:1243](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1243)
395+
Defined in: [packages/form-core/src/FieldApi.ts:1257](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1257)
396396
397397
Replaces a value at the specified index.
398398
@@ -412,7 +412,7 @@ Replaces a value at the specified index.
412412
413413
#### Returns
414414
415-
`Promise`\<`void`\>
415+
`void`
416416
417417
***
418418
@@ -422,7 +422,7 @@ Replaces a value at the specified index.
422422
setErrorMap(errorMap): void
423423
```
424424
425-
Defined in: [packages/form-core/src/FieldApi.ts:1613](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1613)
425+
Defined in: [packages/form-core/src/FieldApi.ts:1652](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1652)
426426
427427
Updates the field's errorMap
428428
@@ -495,7 +495,7 @@ swapValues(
495495
opts?): void
496496
```
497497
498-
Defined in: [packages/form-core/src/FieldApi.ts:1258](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1258)
498+
Defined in: [packages/form-core/src/FieldApi.ts:1285](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1285)
499499
500500
Swaps the values at the specified indices.
501501
@@ -547,7 +547,7 @@ Updates the field instance with new options.
547547
validate(cause, opts?): unknown[] | Promise<unknown[]>
548548
```
549549
550-
Defined in: [packages/form-core/src/FieldApi.ts:1553](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1553)
550+
Defined in: [packages/form-core/src/FieldApi.ts:1592](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1592)
551551
552552
Validates the field value.
553553

‎packages/form-core/src/FieldApi.ts

+45-6
Original file line numberDiff line numberDiff line change
@@ -1226,7 +1226,14 @@ export class FieldApi<
12261226
pushValue = (
12271227
value: TData extends any[] ? TData[number] : never,
12281228
opts?: UpdateMetaOptions,
1229-
) => this.form.pushFieldValue(this.name, value as any, opts)
1229+
) => {
1230+
this.form.pushFieldValue(this.name, value as any, opts)
1231+
1232+
this.options.listeners?.onChange?.({
1233+
value: this.state.value,
1234+
fieldApi: this,
1235+
})
1236+
}
12301237

12311238
/**
12321239
* Inserts a value at the specified index, shifting the subsequent values to the right.
@@ -1235,7 +1242,14 @@ export class FieldApi<
12351242
index: number,
12361243
value: TData extends any[] ? TData[number] : never,
12371244
opts?: UpdateMetaOptions,
1238-
) => this.form.insertFieldValue(this.name, index, value as any, opts)
1245+
) => {
1246+
this.form.insertFieldValue(this.name, index, value as any, opts)
1247+
1248+
this.options.listeners?.onChange?.({
1249+
value: this.state.value,
1250+
fieldApi: this,
1251+
})
1252+
}
12391253

12401254
/**
12411255
* Replaces a value at the specified index.
@@ -1244,26 +1258,51 @@ export class FieldApi<
12441258
index: number,
12451259
value: TData extends any[] ? TData[number] : never,
12461260
opts?: UpdateMetaOptions,
1247-
) => this.form.replaceFieldValue(this.name, index, value as any, opts)
1261+
) => {
1262+
this.form.replaceFieldValue(this.name, index, value as any, opts)
1263+
1264+
this.options.listeners?.onChange?.({
1265+
value: this.state.value,
1266+
fieldApi: this,
1267+
})
1268+
}
12481269

12491270
/**
12501271
* Removes a value at the specified index.
12511272
*/
1252-
removeValue = (index: number, opts?: UpdateMetaOptions) =>
1273+
removeValue = (index: number, opts?: UpdateMetaOptions) => {
12531274
this.form.removeFieldValue(this.name, index, opts)
12541275

1276+
this.options.listeners?.onChange?.({
1277+
value: this.state.value,
1278+
fieldApi: this,
1279+
})
1280+
}
1281+
12551282
/**
12561283
* Swaps the values at the specified indices.
12571284
*/
1258-
swapValues = (aIndex: number, bIndex: number, opts?: UpdateMetaOptions) =>
1285+
swapValues = (aIndex: number, bIndex: number, opts?: UpdateMetaOptions) => {
12591286
this.form.swapFieldValues(this.name, aIndex, bIndex, opts)
12601287

1288+
this.options.listeners?.onChange?.({
1289+
value: this.state.value,
1290+
fieldApi: this,
1291+
})
1292+
}
1293+
12611294
/**
12621295
* Moves the value at the first specified index to the second specified index.
12631296
*/
1264-
moveValue = (aIndex: number, bIndex: number, opts?: UpdateMetaOptions) =>
1297+
moveValue = (aIndex: number, bIndex: number, opts?: UpdateMetaOptions) => {
12651298
this.form.moveFieldValues(this.name, aIndex, bIndex, opts)
12661299

1300+
this.options.listeners?.onChange?.({
1301+
value: this.state.value,
1302+
fieldApi: this,
1303+
})
1304+
}
1305+
12671306
/**
12681307
* @private
12691308
*/

‎packages/form-core/tests/FieldApi.spec.ts

+40
Original file line numberDiff line numberDiff line change
@@ -1156,6 +1156,46 @@ describe('field api', () => {
11561156
expect(form.getFieldValue('greet')).toStrictEqual('hello baz')
11571157
})
11581158

1159+
it('should run the onChange listener when the field array is changed', () => {
1160+
const form = new FormApi({
1161+
defaultValues: {
1162+
items: ['one', 'two'],
1163+
},
1164+
})
1165+
form.mount()
1166+
1167+
let arr!: string[]
1168+
1169+
const field = new FieldApi({
1170+
form,
1171+
name: 'items',
1172+
listeners: {
1173+
onChange: ({ value }) => {
1174+
arr = value
1175+
},
1176+
},
1177+
})
1178+
field.mount()
1179+
1180+
field.removeValue(1)
1181+
expect(arr).toStrictEqual(['one'])
1182+
1183+
field.replaceValue(0, 'start')
1184+
expect(arr).toStrictEqual(['start'])
1185+
1186+
field.pushValue('end')
1187+
expect(arr).toStrictEqual(['start', 'end'])
1188+
1189+
field.insertValue(1, 'middle')
1190+
expect(arr).toStrictEqual(['start', 'middle', 'end'])
1191+
1192+
field.swapValues(0, 2)
1193+
expect(arr).toStrictEqual(['end', 'middle', 'start'])
1194+
1195+
field.moveValue(0, 1)
1196+
expect(arr).toStrictEqual(['middle', 'end', 'start'])
1197+
})
1198+
11591199
it('should reset the form on a listener', () => {
11601200
const form = new FormApi({
11611201
defaultValues: {

0 commit comments

Comments
 (0)