Handle empty string as undefined

[Jancera]

Problem

In my project, I need to remove all empty strings from form results. For example, if a user types something and then deletes it, that empty string should be converted to undefined.

To do this, I decided to update my input component, which uses the Controller strategy, to check if the value is an empty string and, if so, set it to undefined.

export default function FormInput({ name, label }: InputProps) {
  const { control } = useFormContext();

  const handleValue = (value: string) => {
    if (value === "" || value === null) {
      return undefined;
    }

    return value;
  };

  return (
    <Controller
      name={name}
      control={control}
      render={({ field, fieldState: { error } }) => {
        return (
          <div>
            {label ? <label>{label}</label> : null} <br />
            <input
              id={name}
              name={field.name}
              value={field.value}
              onChange={(e) => {
                const handledValue = handleValue(e.target.value);
                field.onChange(handledValue);
              }}
              onBlur={() => {
                field.onBlur();
              }}
            />
            {error ? <p>{error.message}</p> : null}
          </div>
        );
      }}
    />
  );
}

That was working well, until an specific implementation of the forms into the project. We have some forms divided into steps, so those forms are using the FormProvider to read/store values. I have a conditional rendering logic to decide what step are active and the things starts to get weird when I change to the second step. If I delete a input value to be empty string, my component will change it to undefined and set this value for that field on the context, but visually that input will have its value equal to the initial value that was set to that field when the component was rendered.

I am not using the defaultValues option of the useForm hook, when my component renders I use setValue to set each field value to the initial value that I want, this way I could avoid the behavior of setting undefined for the field value and the defaultValue be applied.

function App() {
  const [step, setStep] = useState(0);

  const form = useForm({
    mode: "onChange",
  });

  useEffect(() => {
    form.setValue("name", "nameDefault");
    form.setValue("age", "10");
    form.setValue("city", "cityDefault");
  }, [form]);

  const handleNext = () => {
    setStep(step + 1);
  };

  const handleBack = () => {
    setStep(step - 1);
  };

  return (
    <div>
      <form onSubmit={(d) => console.log(d)}>
        <FormProvider {...form}>
          {step === 0 ? <StepOne /> : <StepTwo />}
        </FormProvider>

        <div>
          <button onClick={handleBack} disabled={step === 0}>
            Back
          </button>
          <button onClick={handleNext} disabled={step === 1}>
            Next
          </button>
          <input type="submit" value="Submit" />
        </div>
      </form>

      <DevTool control={form.control} />
    </div>
  );
}

I wonder why the form context value are correct and on the screen the value switches from empty string to the input initial value and also why this only happens after changing the first step.

Repository

I have a GitHub repo with a sample project so you guys can see what is happening

Running the project

• Clone the repository
• Run npm install
• Run npm run dev

Replicate the problem

• Click the Next button
• Delete the value inside City input
• When you delete the last letter, the value will be reseted to "cityDefault", but the submit button prints the city value as undefined