initialValue of useField() hook resets input.value of the field

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

const Component = () => {
  useField("firstName", { subscription: { value: true }, initialValue: "Max" });
  return (
    <div>
      <label>First Name (new)</label>
      <Field
        name="firstName"
        component="input"
        type="text"
        placeholder="First Name"
      />
    </div>
  );
};

When changing the input value of firstName Field to e.g. ‘Max abc’ and afterwards replacing this Component with an identical ComponentCopy (same fieldName and both using the useField() hook) the changed input.value gets reset to the initialValue: "Max" and therefore looses its changes.

What is the expected behavior?

Expected to work like <Form initialValues={{ firstName: "Max" }} ...> (which I added to the Sandbox demo at the bottom). When changing the input value of firstName Field to e.g. ‘Max abc’ and afterwards replacing this Component with an identical ComponentCopy (same fieldName, both use useField() hook to supply initialValue) the changed input.value (which is still part of the form) gets preserved and ComponentCopy displays the correct input.value ‘Max abc’ instead of the initialValue: "Max".

Sandbox Link

firstName demonstrates the bug and lastName presents a hacky solution to get the expected behavior. At the bottom a standalone form demonstrates the expected behaviour by supplying the initialValues to the <Form .. directly which is at the moment not achievable by using the useField() hook. https://codesandbox.io/s/react-final-form-simple-example-dmh3h?fontsize=14

What’s your environment?

"final-form": "4.14.1",
"react-final-form": "6.2.0",
"node": ">=10.16.0",

Other information

[ndrsllwngr]

// useField.js
import React from 'react';
import { useField as _useField, useForm } from 'react-final-form';

export const useField = (name, config) => {
  const form = useForm();
  const [alreadyRegistered] = React.useState(
    () => form.getFieldState(name) !== undefined,
  );

  if (alreadyRegistered) {
    // eslint-disable-next-line no-unused-vars
    let initialValue;
    // eslint-disable-next-line prefer-const, no-param-reassign
    ({ initialValue, ...config } = config);
  }

  return _useField(name, config);
};

// LabelEditor.js
import { useField } from './useField';
// ...
const { input } = useField(`${element.id}.label`, {
    type: 'text',
    subscription: { value: true },
    initialValue: get(element, 'state.label'),
  });

@Andarist thank you for your solution! I have tested it with our setup, and for now, it suffices as an intermediate workaround.

Nevertheless, I believe that fixing this issue at the useField() level as well as <Field .. level #536 would improve and simplify the UX of this remarkable form library.

[Andarist]

You have explained the problem really well! I feel like this could be supported - but I’m going to leave that decision up to @erikras .

By stretching a little bit current APIs I’ve managed to prepare a working solution for you though - https://codesandbox.io/s/react-final-form-simple-example-g9gqf - which can be used as an intermediate workaround.