Numeric Keys in field names cause formik to crash the browser

[x9sim9]

Bug report

Current Behavior

Crashes the browser

Expected behavior

To work the same as when using string keys

Reproducible example

<Formik initialValues={{}} onSubmit={(v) => console.log(v)}>
        <form>
          <Field name="kitIds[45345345][1]" placeholder="gello" />
          <Field name="kitIds[45345345][2]" placeholder="gello" />
          <Field name="kitIds[two][3]" placeholder="gello" />
          <Field name="kitIds[two][4]" placeholder="gello" />
          <button type="submit">Submit</button>
        </form>
</Formik>

Suggested solution(s)

Should work the same as string keys

Additional context

Adding a letter to the keys solves this bug but not an ideal solution, should work the same as string keys

<Formik initialValues={{}} onSubmit={(v) => console.log(v)}>
        <form>
          <Field name="kitIds[X45345345][1]" placeholder="gello" />
          <Field name="kitIds[X45345345][2]" placeholder="gello" />
          <Field name="kitIds[two][3]" placeholder="gello" />
          <Field name="kitIds[two][4]" placeholder="gello" />
          <button type="submit">Submit</button>
        </form>
</Formik>

Your environment

Software	Version(s)
Formik	2.2.9
React	18.2.0
TypeScript	4.7.4
Browser	Chromium 108.0.5359.99
npm/Yarn	npm 8.12.1
Operating System	Ubuntu 22

[erickcelio]

Hey, I'm not sure if this is a bug, I tried to simulate this on code sandbox and your first example it's working, could you provide more information?

https://codesandbox.io/s/dazzling-lehmann-owjj6w

[akash4393]

So what's happening here is that the name is being passed to lodash's toPath method which converts the name from kitIds[45345345][1] to ['kitIds', '45345345', '1'] and then the value gets to a kitIds = Array[45345345] and then at index 45345345 it creates another array of size 2 and at index 1 of that array it sets the value.

This is happening in the method setIn within the utils.ts file on line 106.

For example, if you pass this as the name "firstName[1][1]" and update the value and log the value in handle submit you will see { firstName: [empty, [empty, 'value'] ] }

Check the console on submit here

As for the browser crashing, that's probably because that size of array is not possible on your system.