Formik: Disable "Nested Objects" behavior

[timrbula]

🚀 Feature request

A prop to disable the "nested objects" conversion of dot notation input ids to nested value objects on change.

Current Behavior

It works great as documented to "use lodash-like dot paths to reference nested Formik values".

Desired Behavior

Have a prop on Formik to disable it. Aka how things worked ~18 months ago. Sorry.

Suggested Solution

enableNestedObjects prop that defaults to true to follow enableReinitialize
or
disableNestedObjects prop to follow false default for boolean props

import React from 'react';
import { Formik, Form } from 'formik';

export const Example = () => (
  <div>
    <h1>SonarQube Properties</h1>
    <Formik
      enableNestedObjects={false}
      initialValues={{
        "sonar.sources": "src",
        "sonar.cobol.copy.directory": "copy"
      }}
    >
      {props => {
        const { values, handleChange } = props;
        return (
          <form>
            <input
              id="sonar.sources"
              onChange={handleChange}
              value={values["sonar.sources"]}
            />
            <input
              id="sonar.java.copy.directory"
              onChange={handleChange}
              value={values["sonar.java.copy.directory"]}
            />
          </form>
        );
      }}
    </Formik>
  </div>
);

Who does this impact?

People that have to integrate with Java properties or other values that use dot notation as a key and can't control what the keys are.

It would be useful for our team to have the option to disable it with a prop. We integrate with Java services that use Java style .properties file dot notation for values. This is trivial to work around if we can control the values for inputs and what they map to but we allow users to create properties in our CICD app to integrate with external services and then dynamically generate the Formik form and inputs. We don't control the upstream service that uses these values to refer to the input and forward them to the consuming services.

Describe alternatives you've considered

We currently transform the keys when initializing Formik and back to their original state before sending the request to save them.

I've looked though the GH issues, Formik docs and messaged on Discord to no avail. I can't seem to find a way to control this behavior this w/ Formik or withFormik. Am I missing something?

Additional context

I'm happy to submit a PR if the maintainers want to support this.

[johnrom]

Another thing to think about: what if someone needs to use both? I think of all the options I can think of, I think I'd want the control of manually transforming the names. Alternatively, managing keys as a nested object then flatting them via reduce during submission. Often the dot in these scenarios represents a nested value anyway, transformed into a flat key value store.

I've often wondered if we could support "escaping" the dot in Formik, but I'm not sure how that would work exactly. It could be something like "myObject\\.myValue\\.one"? Carrying that logic throughout Formik would be no easy task, and would still require a transform to escape your dots.

[stefgootzen]

Agree with @johnrom's escape solution.

I actually had this situation. For now I've solved it by replacing the "." in the initialValues prop of the Formik component and in the name prop of the Field component. Afterwards I revert the replacement in the onSubmit function.

It would be more ideal to be able to escape this value in the name property of the Field component.

[asdwe23901]

            <CustomSelect
                 onChange={handleChange("['user.name']")}
                 name="['user.name']"
            />

[subhashdogra]

I think this will work

[johnrom]

I think we may eventually go the following route, though I could be getting ahead of myself:

const initialValues = {
  name: { first: "OK" },
  "my.field": "also OK",
  "my[field]": "NO."
}

// looks like normal HTML to me
return <Field name="values[name][first]" value="OK" />;

But I know what y'all are gonna say. "But wait! I use field names as values in my checkboxes!"

const initialValues = {
  "name[first]": true,
  "name[last]": false,
};

const MyWhichFieldField = () =>
  <fieldset>
    <legend>Which fields do you want to display on your form?</legend>
    {options.map(option => 
      <label>
        <Field name={option} type="checkbox" value="why not" /> {option}
      </label>
    )}
  </fieldset>

So I guess we'd still need a mechanism to escape names.

[timrbula]

Looks like a solution is documented on the arrays and nested object docs that matches the solutions posted above. Thanks ya'll.