Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

I get the following warning running jest test, since updating to react 16.13.0:
https://reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render

    console.error node_modules/react-dom/cjs/react-dom.development.js:88
      Warning: Cannot update a component (`ReactFinalForm`) while rendering a different component (`Field`). To locate the bad setState() call inside `Field`, follow the stack trace as described in https://fb.me/setstate-in-render
          in Field (at FormField.tsx:19)
          in div (created by FormField)
          in FormField (at FormField.tsx:17)
          in FormField (at PetForm.tsx:38)
          in div (at PetForm.tsx:37)
          in FieldArray (at PetForm.tsx:34)
          in div (created by FormField)
          in FormField (at PetForm.tsx:32)
          in form (created by Form)
          in Form (at PetForm.tsx:30)
          in ReactFinalForm (at PetForm.tsx:17)
          in PetForm (at PetForm.test.tsx:120)

https://travis-ci.org/github/chubbyphp/petstore-react
https://github.com/chubbyphp/petstore-react/blob/master/src/__tests__/Component/Form/PetForm.test.tsx#L106-L158

What is the expected behavior?

Run without issue

Sandbox Link

What's your environment?

node: v12.16.1

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-final-form": "^6.3.5",
"react-final-form-arrays": "^3.1.1"

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

We have an array of fruits.
Initial values are: ['', '']

Steps to reproduce:

1. Modify field for Fruit #1 (eg. type 'orange')

2. Click on `pop()` button

3. Click on `unshift('apple')` button.

Fruit #1 is touched even though it was never focused
Fruit #2 is not touched even though it was focused and blurred.

What is the expected behavior?

I would expect Fruit #1 to have touched: false since it was never focused.
I would expect Fruit #2 to have touched: true since it was focused and blurred.

Sandbox Link

What's your environment?

Other information

Bug report

This issue was originally described at final-form/react-final-form-arrays#39
It looks like it's more about the final-form-arrays, then about the react-final-form-arrays

What is the current behavior?

field.move causes an error when applied to two objects with different set of fields.

Look at the demo: https://codesandbox.io/s/x94j811oj4
Open the console and click a swap button

What is the expected behavior?

To swap objects with no error

What's your environment?

See the CodeSandBox link

Are you submitting a bug report or a feature request?

Support request.
Sorry, i know this tracker is not for support requests, but i am asked this question on Stack Overflow and it looks like it will never be answered.

Please, could you explain how i can add array field and add validation rules for this fields? For example i have array of customers and i want to specify validation rules on 'customers[].firstName'. I can add simple fields but i have no idea what to write for arrays :(

Sandbox Link

https://codepen.io/felix0808/pen/jZqyaB

Are you submitting a bug report or a feature request?

I believe I found a bug.

What is the current behavior?

These are the steps to reproduce:

1. Create two input fields
2. Swap them
3. Type into the first input field
4. The typed character will not appear in the first input field, but in the second

What is the expected behavior?

Swapping or moving fields should preserve behavior.

Sandbox Link

To keep things as simple as possible, I reused the sandbox from the issue referenced below, simply upgrading the library version to 1.1.0.

What's your environment?

The problem occurs with final-form-arrays version 1.1.0. Downgrading the package to 1.0.6 solves the problem.

Other information

I believe the problem is caused by the latest change to the move and swap code in response to this previous issue.

This commit looks especially suspicious.

I would be happy to work on it, if you give me some pointers on where to start 💪

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

We have an array of fruits.
Initial values are: ['', '']

Steps to reproduce:

1. Enter a value into Fruit #1 field (eg. 'apple')
2. Blur the Fruit #1 field. It becomes touched.
3. Click `shift()` button.

The field that was never touched now has `touched: true`

What is the expected behavior?

Fruit #1 field should have touched: false since the definition of touched is:

true if this field has ever gained and lost focus. false otherwise.

Sandbox Link

What's your environment?

Other information

Are you submitting a bug report or a feature request?

Documentation update request - I'm not sure if that counts as a bug or a feature.

What is the current behavior?

The current documentation for remove and removeBatch methods:

form.mutators.remove
(name: string, index: number) => any

Removes a value from the specified index of the field array. Returns the removed value.

form.mutators.removeBatch
(name: string, indexes: Array<number>) => void

Removes the values at the specified indexes of the field array.

What is the expected behavior?

The documentation above didn't prepare me for the fact that, if there's only one value left in the field array, the result won't be an empty array. If the last element is removed from the array, the whole array gets removed and the field is set to undefined.

Sandbox Link

What's your environment?

Other information

Code that sets the array to undefined if its length is zero: https://github.com/final-form/final-form-arrays/blob/fe3c260939cbdd446a48304dd2df0be2a1c41237/src/remove.js#L20C5-L22C18

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

We have an array of fruits.
Initial values are: ['', '']

Steps to reproduce:

1. modify field for Fruit #2.

2. Click outside Fruit #2 field. It's state becomes touched: true

3. click remove(0).

Field state touched is false

What is the expected behavior?

Field state touched should remain true

Sandbox Link

What's your environment?

Other information

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

Removing a field using remove mutator does not remove the correct field from the screen, if the fields are re-arranged using move mutator before removing.

What is the expected behavior?

Correct field is removed from the screen

Sandbox Link

To reproduce the bug:
https://codesandbox.io/s/final-form-arrays-bug-x17sb

1. Create two customers => (order: 1,2)
2. Reorded customers by dragging => (order: 2,1)
3. Remove Customer#2 by clicking red cross
4. Customer#1 is removed from the screen instead of Customer#2

What's your environment?

The bug can be reproduced using final-form-arrays version from 1.2.0 to 3.0.2
Version 1.1.2 is working as expected

"final-form": "4.18.7",
"final-form-arrays": "3.0.2",
"react": "16.12.0",
"react-beautiful-dnd": "13.0.0",
"react-dom": "16.12.0",
"react-final-form": "6.3.5",
"react-final-form-arrays": "3.1.0",

Other information

Final Form state seems to be updated correctly (as seen in sandbox example). But somehow Field components doesn't get updated with those values.

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

After moving fields with different shapes, some fields' change, blur and focus functions were gone.

What is the expected behavior?

Maybe these functions should be restored or recreated.

test case below would fail with TypeError: state.fields.foo[1].cat.change is not a function

it('should preserve functions in field state when fields with different shapes', () => {
  // implementation of changeValue taken directly from Final Form
  const changeValue = (state, name, mutate) => {
    const before = getIn(state.formState.values, name)
    const after = mutate(before)
    state.formState.values = setIn(state.formState.values, name, after) || {}
  }
  const state = {
    formState: {
      values: {
        foo: [{ dog: 'apple dog', cat: 'apple cat' }, { dog: 'banana dog' }]
      }
    },
    fields: {
      'foo[0].dog': {
        name: 'foo[0].dog',
        touched: true,
        error: 'Error A Dog',
        change: () => 'A Dog'
      },
      'foo[0].cat': {
        name: 'foo[0].cat',
        touched: false,
        error: 'Error A Cat',
        change: () => 'A Cat'
      },
      'foo[1].dog': {
        name: 'foo[1].dog',
        touched: true,
        error: 'Error B Dog',
        change: () => 'B Dog',
      }
    }
  }
  move(['foo', 0, 1], state, { changeValue })
  expect(state.formState).toMatchObject({values: {
    foo: [{ dog: 'banana dog' }, { dog: 'apple dog', cat: 'apple cat' }]
  }})
  expect(state.fields['foo[0].dog'].change()).toBe('A Dog')
  expect(state.fields['foo[1].dog'].change()).toBe('B Dog')
  
  // this expect would fail with `TypeError: state.fields.foo[1].cat.change is not a function`
  expect(state.fields['foo[1].cat'].change()).toBe('A Cat')
})

What's your environment?

"final-form-arrays": "3.0.2",

Other information

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

Currently, when adding an item into an array key, and then removing the last one, the key gets removed from the original object, no matter if the key was initialized as an empty array.

What is the expected behavior?

Keep the key in the form values, as an empty array.

Sandbox Link

https://codesandbox.io/s/react-final-form-field-arrays-forked-xopb2v

What's your environment?

"final-form": "4.20.9",
"final-form-arrays": "3.1.0",
"react": "17.0.0",
"react-dom": "17.0.0",
"react-final-form": "6.5.9",
"react-final-form-arrays": "3.1.3",

Are you submitting a bug report or a feature request?

I believe this is a bug.

What is the current behavior?

Here is a version of of the React Final Form Arrays example, modified to have validation errors that only appear when a field has been touched:

https://codesandbox.io/s/8k623wrrz9

1. Click "Add Customer"
2. Click in the "First Name" field, type something in (ex. "Homer")
3. Click in the "Last Name" field, but do not type in it
4. Click "Add Customer" again (Red text "Required" will appear under Customer 1's Last Name)
5. Click in Customer 2's "First Name" field, type something different (ex. "Marge")
6. Do not click in Customer 2's "Last Name" field.
7. Click the "Swap first two" button

The names have changed, but the "Required" error message is still in the same place (or, depending on your perspective, has moved to a different customer).

What is the expected behavior?

I would expect the "touched" state to move along with the field, so that in this example the error would still be attached to Homer's last name, even though Homer has moved.

What's your environment?

• [email protected]
• [email protected]
• [email protected]
• Chrome 67.0.3396.99
• macOS Sierra (10.12.6)

Other information

The demo shows this happening with swap, but I originally observed the behavior with move.

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

We have an array of fruits.
Initial values are: ['']

Steps to reproduce:

1. Click insert(0, 'apple') button.

The input of index 1 (the last one) have pristine: true state even though it was never touched.

What is the expected behavior?

The input of index 1 (the last one) should have pristine: false since it was never touched.

Sandbox Link

What's your environment?

Other information

bug report or a feature

Hi, find that function changeValue, checks state.fields[name]. In my case form has routes and some mutation logic take place in component that does not have any or component. So mutators don't work.

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

We have an array of fruits.
Initial values are: ['', 'apple']

Steps to reproduce:

• Clean Fruit #2 field (enter empty value '')
• Click on move() button.

Fruit #1 is not pristine

What is the expected behavior?

Fruit #1 field should be pristine since it equals === the initial value

Sandbox Link

What's your environment?

Other information

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

When move field items field state is updated but not subscribers and validators this causes errors in many cases

What is the expected behavior?

All states must be correctly moved

Sandbox Link

What's your environment?

Other information

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

'flow check' failed with 8 errors as shown below.

[flow] Error: node_modules/final-form/dist/types.js.flow:218
[flow] 218: export type Mutator = (args: any[], state: MutableState, tools: Tools) => any
[flow]                                   ^^^^^ array type. Only tuples and array literals with known elements can flow to
[flow]   7:   [name, index, value]: Args,
[flow]                              ^^^^ Args. See: src/insert.js:7

What is the expected behavior?

'flow check' passes with no errors.

What's your environment?

🏁 Final Form Arrays 1.0.4
🏁 Final Form 4.0.4
Mac OS 10.12.6
Node 10.5.0

Other information

https://flow.org/en/docs/types/tuples/#toc-tuples-don-t-match-array-types

I'm not sure but one of the solution is to use any[] as every Mutators method.
example (insert.js)

const insert: Mutator = (
  [name, index, value]: any[],  // don't use tuple type.
  state: MutableState,
  { changeValue }: Tools
) => {

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

removed data by id from 5 -10

What is the expected behavior?

Should remove id from 4 to 16 and keep the data with id 1 to 3

Sandbox Link

Sandbox Link Here

What's your environment?

"final-form": "4.20.9",
"final-form-arrays": "3.1.0",
"loader-utils": "3.2.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-final-form": "6.5.9",
"react-final-form-arrays": "3.1.4"

Other information

Are you submitting a bug report or a feature request?

bug

What is the current behavior?

No ts bindings are in the build

What is the expected behavior?

source index.d.ts is built and packaged as "typings": "dist/index.d.js"

Sandbox Link

https://unpkg.com/[email protected]/dist/index.d.js

Bug report

What is the current behaviour?

https://codesandbox.io/s/react-final-form-field-arrays-forked-q70qm

Click Add Customer
Fill fields
Click Add Customer

Values from first row will be used in created one

What is the expected behaviour?

It shouldn't inherit values from next nearest element

Are you submitting a bug report or a feature request?

Bug Report!

What is the current behavior?

The unshift mutator doesn't work. When a field is unshifted onto an array, it's value is inited as null and any changes to field (eg, via <input>s) aren't reflected.

Sandbox Link

This is actually visible via a slight tweak to the standard RFF Arrays example. Rather than just an "Add customer" button, there's now Append and Prepend variants. I've also bumped versions on all FF libs to latest.

To reproduce:

• Append a customer. Fill out the name.
• Prepend a customer.
  • Oops! The first and last name shown are those of the first, appended customer.
• Change the prepended customer's name.
  • Oops! It don't work! Changes aren't reflect in the <input>!

What is the expected behavior?

The behaviour that you see if you go into the sandbox and change the FFA library version to 3.0.1

What's your environment?

FF 4.18.6
FFA 3.0.2
RFF 6.3.3
RFFA 3.1.1

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

When empty '' initial value is present, Array Fields are never pristine again like normal Fields.

Steps to reproduce:

1. Enter some value into the usual field, then revert the change. The field is pristine.
2. Enter some value into Fruit #1 field. Revert the change. The field is pristine.
3. Enter some value into Fruit #2 field. Revert the change. The field is NOT pristine.

What is the expected behavior?

I would expect Fruit #2 field to be pristine.

Sandbox Link

What's your environment?

Other information

Indexes should be sorted as numbers but sorted as symbols.

Example:
indexes argument: [2 .. 24]
So it will be sorted to [10,11,12, .. ,2,20,21, .. ,3,4, .. ,8,9].
But this order is not expected later in function.

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

We have an array of fruits.
Initial values are: []

Steps to reproduce:

1. click insert(0, '') or push('') button.

When an Array Field mounts for the first time with insert or push, it's NOT pristine.

What is the expected behavior?

When a normal Field mounts for the first time, it's pristine. I would expect every inserted or pushed input to be pristine as well.

Sandbox Link

What's your environment?

Other information

Are you submitting a bug report or a feature request?

Bug report.

What is the current behavior?

Submit error is not matched with the array field - when the field is removed, submit error is stay in the same place and not removed and display wrong error.

https://codesandbox.io/s/react-final-form-field-arrays-30tf2

What is the expected behavior?

Submit error is matched with the array field - when the field is removed, submit error is also removed.

What's your environment?

"final-form": "4.18.6"
"final-form-arrays": "3.0.2"
"final-form-focus": "1.1.2"
"react-final-form": "6.3.3"
"react-final-form-arrays": "3.1.1"

Other information

This bug already reported on Issue-18

Very often I need a sort mutator, for arrays, after any actions. For example, update a value, and sort after. I have added the method in my local project. And bind with arrayMutators. Works fine! May be I could contribute. I feel the method could be usefull

const sort: Mutator<any> = (
  [name, compareFn]: [string, (a: any, b: any) => number],
  state: MutableState<any>,
  { setIn }: Tools<any>
) => {
  const sortedArray = state.formState.values[name].sort(compareFn)
  setIn(state, 'formState.values' + name, sortedArray)
}

export default sort;

Not sure if this is a Final Form Arrays or a Final Form or Yup issue, but posting it here for initial guidance.

Seems that when I have a form with a FieldArray and async validation (Yup), all empty fields in the array re-renders on each keypress in any other field (even outside the array), even if all subscriptions are disabled.

When comparing the meta information for the rendered component, it seems that meta.errors, meta.invalid and meta.valid changes briefly when typing. Given the field is invalid, the field will briefly turn valid and then invalid again, making it re-render even though nothing actually changed.

Changing the validation to sync resolves the issue.

The following sandbox showcases the issue, and includes a sync validator for comparison.

https://codesandbox.io/s/react-final-form-field-arrays-w-async-validation-nlr1i?file=/index.js

What's your environment?

🏁 Final Form Arrays version 3.0.2
🏁 Final Form version 4.20.2

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

When field array values have different shapes, removing items results in invalid form state.
Steps:

1. open sandbox
2. Click delete on the first row until only one row is left
3. Notice that square1 is shown in the first row, even when its row has been removed.

What is the expected behavior?

Correct values should be rendered.

Sandbox Link

https://codesandbox.io/s/intelligent-hoover-pwu0y?file=/src/App.js

What's your environment?

final-form 4.20.1
final-form-arrays 3.0.2
react-final-form 6.5.1
react-final-form-arrays 3.1.2

Other information

A possible hack is to sort the fields in the mutator so that indexes are in order:

Object.keys(state.fields).sort().forEach(key => {

BTW renameField(state, key, decrementedKey) currently doesn't do anything since field is deleted from state prior to that: delete state.fields[key]

Bug report

What is the current behavior?

Using final-form-arrays of all the versions above 1.1.2 the validation on the field goes before the field was removed from array. So it shows incorrect result on UI.

Example

Steps to reproduce:

1. Add 2 or more Customers
2. Check all 'Has required fields' checkboxes
3. Click on submit button
4. Remove the first customer (red cross)

Expected result: All validation errors for the rest of the fields are shown

Actual result: No validation erros are shown

Other information

When using version 1.1.2, it works as expected.

Are you submitting a bug report or a feature request?

feature request

What is the current behavior?

If there's a need to insert multiple new items into the array, a loop will be necessary using push or insert, which is not optimal. The same applies for removing multiple items from the array.

What is the expected behavior?

I would like to have a mutator that accepts an array with new items and merges it with the field array. Also, another mutator that accepts an array of indexes to be removed from the field array.

I suspect this is by design but swapping rows moves values but keeps initialValues.
Change handlers get fired for moved rows and meta.dirty is set. Is there a way to avoid it it? From my point of view array is now dirty, but individual values should be kept clean.

I pondered writing a mutator that swaps/moves initialValues but it seems awkward especially if you want to move newly created rows, that have undefined initialValues.

Are you submitting a bug report or a feature request?

Bug report - I think

What is the current / expected behaviour?

Using any of the array mutators does not change the modified value of the value array. I would expect modified to be true after adding to, removing from, or changing the order of an array. As things stand, I don't think the modified value of a field array will ever change (although pristine and dirty do).

There is a slight question mark in my mind whether using update for example should affect the modified value of the field array. The 'child' field will definitely have been modified, but it's not obvious that this means you would say the 'parent' field is modified. I'm edging towards not. But would appreciate any thoughts on this.

Sandbox Link

https://codesandbox.io/s/kx8qv67nk5

1. Add Customers
2. Observe the value of modified via in the state for customers
3. It remains false

What's your environment?

final-form: 4.12.0,
final-form-arrays: 1.1.2,
react-final-form: 4.1.0,
react-final-form-arrays: 2.0.3,
react: 16.8.6

Solution

There is an easy fix for this, which is to set the modified value for the field to true in the mutators. I am happy to put in a PR for this and update tests etc, but thought I would check that what I would expect the behaviour is infact the desired behaviour.

Other information

There is also currently a bug where the modified value is not rest on form reset here. As far as I can tell, this issue is largely unrelated, but I mention it because there is a chance of some overlap.

Are you submitting a bug report or a feature request?

feature request

What is the current behavior?

In order to update the value of arbitrary index of array, we have to remove the value of index and insert again.

What is the expected behavior?

This feature enable to update the value at once (also without mutating the length of array).

Hi guys.

My question is the update method merge the prevstate with the nextstate or replace the whole object?

Bug or Feature?

BUG

What is the current behavior?

In nested arrays, state is not correctly managed for operations like insert:

1. step

In the following image I added two customers to my array, their names are set via initialValue on field level to Adam and Sam, both fields are not dirty. Then I press the + next to Adam to add another entry between both of them.

2. step

Now, the new second entry is:

1. not given an initial name
2. the field is dirty as it is for final form changed from Sam to ``
   The third entry (Sam) is:
3. not Sam anymore but Sean
4. if the field would have been dirty, it would be now not dirty
   Lets press the x on the new entry next.
   

3. step

This time, we get to keep Sean (formerly known as Sam), but the field is now dirty.

Analysis

One of the causes I could identify, was the use of new RegExp("^" + name + "...). As our name is something[0].customers we would actually need to escape all regex special chars like [, [ and . to retrieve a functioning expression. With the current regex, tokens will always be null and, therefore, the state is never moved.

On a side-note, the regex is also broken for non-nested arrays:
^some.path.customers\[(\d+)\](.*) does not only match some.path.customers[0] but also someapathacustomers[0]. The . would already need escaping.

https://codesandbox.io/s/react-final-form-field-arrays-6ikh2?fontsize=14

What is the expected behavior?

State should be correctly managed. e.g. if an item is inserted between two items, the state of the original item should be moved.

Sandbox Link

https://codesandbox.io/s/react-final-form-field-arrays-6ikh2?fontsize=14

What's your environment?

Newest versions (see sandbox)

@erikras I am happy to help fixing the issues. One of the options is to escape special chars within the name or do a string comparison, maybe by using toPath and then compare the segments.

The last released version (3.0.2) does not include this commit 916b720 that fixes this bug #48

Can you please latest master as the next minor version?