Submitting an array from an input

[Ekeu]

Hello

I am trying to buld a tags input component with zod and RHF. The end goal is to be able to submit the form with the tags field being an array. But since (from my understanding of the library) RHF binds the name to the input field, even if I call setValue('tags', tagsArray). The moment I start typing again it is changed back to a string. Hence the validation fails onSubmit

In my code, since I have a nested input component I started by rapping it with a FormProvider which received the method properties from useForm

const methods = useForm<z.infer<typeof MY_SCHEMA>>({
  resolver: zodResolver(MY_SCHEMA),
  defaultValues: {
    tags: [],
  },
});

<FormProvider {...methods}>
  <form onSubmit={methods.handleSubmit(handleSubmit)}>
  /**
   * InputTag contains my coustom input that registers the field
   * It is inside a parent component. Just saying because below you might be wondering why I used the useController hook
  */
  <InputTag 
      type="text"
      name="tags"
      tags={tags}
      className="mt-1"
      onKeyDown={handleKeyDown}
      onRemoveTag={handleRemoveTag}
      placeholder="e.g. javascript, reactjs, nodejs"
      helperText="Press Enter to add a tag"
    />
  </form>
</FormProvider>

Below is the handleKeyDown method

const { tags, handleAddTag, handleRemoveTag } = useInputTag();

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (e.key === "Enter") {
    const currentTarget = e.currentTarget as HTMLInputElement;
    const value = currentTarget.value.trim();

    if (value) {
      if (value.length > 10) {
        return setError("tags", {
          type: "required",
          message: "Tags must be between 1 and 10 characters.",
        });
      }

      handleAddTag(value, (updatedTags) => {
        setValue("tags", updatedTags);
        currentTarget.value = "";
        clearErrors("tags");
      });
    } else {
      currentTarget.value = "";
    }
  }
};

This is my zod validation schema

export const MY_SCHEMA = z.object({
  tags: z
    .array(
      z.string().min(1).max(10, {
        message: "Tags must be between 1 and 10 characters.",
      }),
    )
    .min(1, {
      message: "Please enter at least one tag.",
    })
    .max(5, {
      message: "Please enter no more than 5 tags.",
    }),
});

Below is a screencast

Screencast.from.07-30-2024.03.52.29.PM.webm

I tried using the useController hook but when I use that resetting the input value (currentTarget.value = "";) doesn't work anymore.

const { field } = useController({ name: "tags" });

<InputTag
  ref={field.ref}
  type="text"
  name={field.name}
  tags={tags}
  className="mt-1"
  onKeyDown={handleKeyDown}
  onRemoveTag={handleRemoveTag}
  placeholder="e.g. javascript, reactjs, nodejs"
  helperText="Press Enter to add a tag"
/>

This is what I get

Screencast.from.07-30-2024.04.05.02.PM.webm

Thanks

[Ekeu]

Hello

While still waiting for an answer, I gave some thoughts to this again this morning and I told myself I don't think it's even a good idea to force this kind of implementation 😃.

The solution I came around with was to simply "unbind" the link between the input field and RHF by giving the input field another name. So, I ended up with this

const handleInputAddTag = (tag: string) => {
  if (tag) {
    if (tag.length > 10) {
      return setError("tags", {
        type: "required",
        message: "Tags must be between 1 and 10 characters.",
      });
    }

    handleAddTag(tag, (updatedTags) => {
      setValue("tags", updatedTags);
      setValue("tag", "");
      clearErrors("tags");
    });
  } else {
    setValue("tag", "");
  }
};

/* Inside InputTag parent component */

const { formState: { errors } } = useFormContext();

<InputTag
  type="text"
  tags={tags}
  // Created a new name
  name={"tag"}
  className="mt-1"
  /**
  * For accessibility to remain I just created a new prop error
  * Because in my Input component by default I did errors[name]?.message
  */
  error={errors?.tags?.message}
  onAddTag={handleInputAddTag}
  onRemoveTag={handleRemoveTag}
  helperText="Press Enter to add a tag"
  placeholder="e.g. javascript, reactjs"
/>