Skip to content

Commit 60f3a99

Browse files
erikraserikras
authored
Used resetFieldState to fix insert and unshift bugs (#34)
1 parent 3effa4d commit 60f3a99

12 files changed

+120
-112
lines changed

‎package-lock.json

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"eslint-plugin-import": "^2.16.0",
5353
"eslint-plugin-jsx-a11y": "^6.2.1",
5454
"eslint-plugin-react": "^7.13.0",
55-
"final-form": "^4.17.0",
55+
"final-form": "^4.18.0",
5656
"flow-bin": "^0.102.0",
5757
"glow": "^1.2.2",
5858
"husky": "^3.0.0",
@@ -73,7 +73,7 @@
7373
"typescript": "^3.5.3"
7474
},
7575
"peerDependencies": {
76-
"final-form": "^4.17.0"
76+
"final-form": "^4.18.0"
7777
},
7878
"lint-staged": {
7979
"*.{js*,ts*,json,md,css}": [

‎src/insert.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { MutableState, Mutator, Tools } from 'final-form'
44
const insert: Mutator<any> = (
55
[name, index, value]: any[],
66
state: MutableState<any>,
7-
{ changeValue }: Tools<any>
7+
{ changeValue, resetFieldState }: Tools<any>
88
) => {
99
changeValue(state, name, (array: ?(any[])): any[] => {
1010
const copy = [...(array || [])]
@@ -22,12 +22,12 @@ const insert: Mutator<any> = (
2222
if (fieldIndex >= index) {
2323
// inc index one higher
2424
const incrementedKey = `${name}[${fieldIndex + 1}]${tokens[2]}`
25-
changes[incrementedKey] = state.fields[key]
25+
changes[incrementedKey] = { ...state.fields[key] } // make copy of field state
2626
changes[incrementedKey].name = incrementedKey
27-
changes[incrementedKey].forceUpdate = true
27+
changes[incrementedKey].lastFieldState = undefined
2828
}
2929
if (fieldIndex === index) {
30-
delete state.fields[key]
30+
resetFieldState(key)
3131
}
3232
}
3333
})

‎src/insert.test.js

+25-8
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { getIn, setIn } from 'final-form'
44
describe('insert', () => {
55
const getOp = (index, value) => {
66
const changeValue = jest.fn()
7+
const resetFieldState = jest.fn()
78
const state = {
89
formState: {
910
values: {
@@ -23,12 +24,13 @@ describe('insert', () => {
2324
}
2425
}
2526
}
26-
insert(['foo', index, value], state, { changeValue })
27+
insert(['foo', index, value], state, { changeValue, resetFieldState })
2728
return changeValue.mock.calls[0][2]
2829
}
2930

3031
it('should call changeValue once', () => {
3132
const changeValue = jest.fn()
33+
const resetFieldState = jest.fn()
3234
const state = {
3335
formState: {
3436
values: {
@@ -52,7 +54,10 @@ describe('insert', () => {
5254
}
5355
}
5456
}
55-
const result = insert(['foo', 0, 'bar'], state, { changeValue })
57+
const result = insert(['foo', 0, 'bar'], state, {
58+
changeValue,
59+
resetFieldState
60+
})
5661
expect(result).toBeUndefined()
5762
expect(changeValue).toHaveBeenCalled()
5863
expect(changeValue).toHaveBeenCalledTimes(1)
@@ -86,6 +91,9 @@ describe('insert', () => {
8691
const after = mutate(before)
8792
state.formState.values = setIn(state.formState.values, name, after) || {}
8893
}
94+
const resetFieldState = name => {
95+
state.fields[name].touched = false
96+
}
8997
const state = {
9098
formState: {
9199
values: {
@@ -100,7 +108,7 @@ describe('insert', () => {
100108
},
101109
'foo[1]': {
102110
name: 'foo[1]',
103-
touched: false,
111+
touched: true,
104112
error: 'B Error'
105113
},
106114
'foo[2]': {
@@ -115,7 +123,10 @@ describe('insert', () => {
115123
}
116124
}
117125
}
118-
const returnValue = insert(['foo', 1, 'NEWVALUE'], state, { changeValue })
126+
const returnValue = insert(['foo', 1, 'NEWVALUE'], state, {
127+
changeValue,
128+
resetFieldState
129+
})
119130
expect(returnValue).toBeUndefined()
120131
expect(state.formState.values.foo).not.toBe(array) // copied
121132
expect(state).toEqual({
@@ -130,23 +141,29 @@ describe('insert', () => {
130141
touched: true,
131142
error: 'A Error'
132143
},
144+
'foo[1]': {
145+
name: 'foo[1]',
146+
touched: false,
147+
error: 'B Error',
148+
lastFieldState: undefined
149+
},
133150
'foo[2]': {
134151
name: 'foo[2]',
135-
touched: false,
152+
touched: true,
136153
error: 'B Error',
137-
forceUpdate: true
154+
lastFieldState: undefined
138155
},
139156
'foo[3]': {
140157
name: 'foo[3]',
141158
touched: true,
142159
error: 'C Error',
143-
forceUpdate: true
160+
lastFieldState: undefined
144161
},
145162
'foo[4]': {
146163
name: 'foo[4]',
147164
touched: false,
148165
error: 'D Error',
149-
forceUpdate: true
166+
lastFieldState: undefined
150167
}
151168
}
152169
})

‎src/move.js

-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@ const move: Mutator<any> = (
6161
change: state.fields[destKey] && state.fields[destKey].change,
6262
blur: state.fields[destKey] && state.fields[destKey].blur,
6363
focus: state.fields[destKey] && state.fields[destKey].focus,
64-
forceUpdate: true,
6564
lastFieldState: undefined // clearing lastFieldState forces renotification
6665
}
6766
}

‎src/move.test.js

+16-22
Original file line numberDiff line numberDiff line change
@@ -97,22 +97,19 @@ describe('move', () => {
9797
name: 'foo[0]',
9898
touched: true,
9999
error: 'Error B',
100-
lastFieldState: undefined,
101-
forceUpdate: true
100+
lastFieldState: undefined
102101
},
103102
'foo[1]': {
104103
name: 'foo[1]',
105104
touched: false,
106105
error: 'Error C',
107-
lastFieldState: undefined,
108-
forceUpdate: true
106+
lastFieldState: undefined
109107
},
110108
'foo[2]': {
111109
name: 'foo[2]',
112110
touched: true,
113111
error: 'Error A',
114-
lastFieldState: undefined,
115-
forceUpdate: true
112+
lastFieldState: undefined
116113
},
117114
'foo[3]': {
118115
name: 'foo[3]',
@@ -176,22 +173,19 @@ describe('move', () => {
176173
name: 'foo[0]',
177174
touched: false,
178175
error: 'Error C',
179-
lastFieldState: undefined,
180-
forceUpdate: true
176+
lastFieldState: undefined
181177
},
182178
'foo[1]': {
183179
name: 'foo[1]',
184180
touched: true,
185181
error: 'Error A',
186-
lastFieldState: undefined,
187-
forceUpdate: true
182+
lastFieldState: undefined
188183
},
189184
'foo[2]': {
190185
name: 'foo[2]',
191186
touched: true,
192187
error: 'Error B',
193-
lastFieldState: undefined,
194-
forceUpdate: true
188+
lastFieldState: undefined
195189
},
196190
'foo[3]': {
197191
name: 'foo[3]',
@@ -281,7 +275,7 @@ describe('move', () => {
281275
name: 'foo[0].dog',
282276
touched: true,
283277
error: 'Error B Dog',
284-
forceUpdate: true
278+
lastFieldState: undefined
285279
},
286280
'foo[0].cat': {
287281
name: 'foo[0].cat',
@@ -302,13 +296,13 @@ describe('move', () => {
302296
name: 'foo[2].dog',
303297
touched: true,
304298
error: 'Error A Dog',
305-
forceUpdate: true
299+
lastFieldState: undefined
306300
},
307301
'foo[2].cat': {
308302
name: 'foo[2].cat',
309303
touched: false,
310304
error: 'Error A Cat',
311-
forceUpdate: true
305+
lastFieldState: undefined
312306
},
313307
'foo[3].dog': {
314308
name: 'foo[3].dog',
@@ -402,13 +396,13 @@ describe('move', () => {
402396
name: 'foo[0].dog',
403397
touched: true,
404398
error: 'Error C Dog',
405-
forceUpdate: true
399+
lastFieldState: undefined
406400
},
407401
'foo[0].cat': {
408402
name: 'foo[0].cat',
409403
touched: false,
410404
error: 'Error C Cat',
411-
forceUpdate: true
405+
lastFieldState: undefined
412406
},
413407
'foo[1].dog': {
414408
name: 'foo[1].dog',
@@ -424,13 +418,13 @@ describe('move', () => {
424418
name: 'foo[2].dog',
425419
touched: true,
426420
error: 'Error B Dog',
427-
forceUpdate: true
421+
lastFieldState: undefined
428422
},
429423
'foo[2].cat': {
430424
name: 'foo[2].cat',
431425
touched: true,
432426
error: 'Error B Cat',
433-
forceUpdate: true
427+
lastFieldState: undefined
434428
},
435429
'foo[3].dog': {
436430
name: 'foo[3].dog',
@@ -489,19 +483,19 @@ describe('move', () => {
489483
name: 'foo[0].dog',
490484
touched: true,
491485
error: 'Error B Dog',
492-
forceUpdate: true
486+
lastFieldState: undefined
493487
},
494488
'foo[1].dog': {
495489
name: 'foo[1].dog',
496490
touched: true,
497491
error: 'Error A Dog',
498-
forceUpdate: true
492+
lastFieldState: undefined
499493
},
500494
'foo[1].cat': {
501495
name: 'foo[1].cat',
502496
touched: false,
503497
error: 'Error A Cat',
504-
forceUpdate: true
498+
lastFieldState: undefined
505499
}
506500
}
507501
})

‎src/remove.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const remove: Mutator<any> = (
3131
const decrementedKey = `${name}[${fieldIndex - 1}]${tokens[2]}`
3232
state.fields[decrementedKey] = backup[key]
3333
state.fields[decrementedKey].name = decrementedKey
34-
state.fields[decrementedKey].forceUpdate = true
34+
state.fields[decrementedKey].lastFieldState = undefined
3535
}
3636
}
3737
})

‎src/remove.test.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -112,13 +112,13 @@ describe('remove', () => {
112112
name: 'foo[1]',
113113
touched: true,
114114
error: 'C Error',
115-
forceUpdate: true
115+
lastFieldState: undefined
116116
},
117117
'foo[2]': {
118118
name: 'foo[2]',
119119
touched: false,
120120
error: 'D Error',
121-
forceUpdate: true
121+
lastFieldState: undefined
122122
},
123123
anotherField: {
124124
name: 'anotherField',

‎src/removeBatch.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const removeBatch: Mutator<any> = (
5050
countBelow(sortedIndexes, fieldIndex)}]${tokens[2]}`
5151
newFields[decrementedKey] = state.fields[key]
5252
newFields[decrementedKey].name = decrementedKey
53-
newFields[decrementedKey].forceUpdate = true
53+
newFields[decrementedKey].lastFieldState = undefined
5454
}
5555
} else {
5656
newFields[key] = state.fields[key]

‎src/removeBatch.test.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ describe('removeBatch', () => {
7777
name: 'foo[0]',
7878
touched: true,
7979
error: 'First Error',
80-
forceUpdate: true
80+
lastFieldState: undefined
8181
}
8282
}
8383
})
@@ -133,7 +133,7 @@ describe('removeBatch', () => {
133133
name: 'foo[0]',
134134
touched: false,
135135
error: 'Second Error',
136-
forceUpdate: true
136+
lastFieldState: undefined
137137
}
138138
}
139139
})
@@ -228,19 +228,19 @@ describe('removeBatch', () => {
228228
name: 'foo[0]',
229229
touched: true,
230230
error: 'A Error',
231-
forceUpdate: true
231+
lastFieldState: undefined
232232
},
233233
'foo[1]': {
234234
name: 'foo[1]',
235235
touched: false,
236236
error: 'D Error',
237-
forceUpdate: true
237+
lastFieldState: undefined
238238
},
239239
'foo[2]': {
240240
name: 'foo[2]',
241241
touched: true,
242242
error: 'E Error',
243-
forceUpdate: true
243+
lastFieldState: undefined
244244
},
245245
anotherField: {
246246
name: 'anotherField',

0 commit comments

Comments
 (0)