Checkbox not working with FormData API

[arodriguezcortes]

Hi team.

I'm implementing a form for the new Twilio Console and decided to take the uncontrolled approach using the now widely supported FormData interface.

However, I noticed that both radio and checkbox components do not implement native radio and checkbox elements under the hood. Then, If I try to access the form data via the FormData API I won't get the data from the radio buttons and checkboxes in the form (and probably other custom components that I've not tried yet).

const handleSubmit = (e: FormEvent<HTMLFormElement>): void => {
  const formElement = e.target as HTMLFormElement;
  e.preventDefault();
  const formData = new FormData(formElement);
  const data = Object.fromEntries(formData); // No data from checkboxes or radio buttons here :(
}

Since this is the first form I'm implementing with paste, I just wanted to confirm if this is something you've considered and if controlled components is your recommended approach for implementing forms in Paste (I know it's the recommended approach in React).

Additionally, given the high importance of forms in the Twilio console and Paste, I would like to suggest if you can expand the information about this in the documentation. Maybe a page under Patterns with your recommended guidelines on how to implement forms with Paste components: Should they be controlled? Should we avoid using the FormData or other native APIs and stick a more react-ish approach? Are you planning to support FormData in the future? I've seen that some teams in the console are using the react-hook-form-paste library, is this a library you'd recommend or support?

[andioneto]

Hi there @arodriguezcortes 👋

Check out this codesandbox I created demonstrating how you can use Checkbox as an uncontrolled component and get the form data using FormData. Feel free to fork the above sandbox and show us more clearly how you are implementing this uncontrolled form, as without being able to see the context around this implementation, it is difficult to debug.

🕵️‍♀️ Some questions that will help us gain clarity 👇
Is this handleSubmit function being used as a click handler on a button that is intended to submit the form? If so I have a few follow up tips and questions that might be of use:

• Are you using your handleSubmit function as a callback for the onSubmit function on the <form> or onClick on your button?
• Have you inspected the event target of the click handler?
• Is there a reason you are not using refs to reference the form-adjacent elements (as is the suggestd approach from our friends at React.

I would expect an error to be thrown indicating that the parameter provided to the FormData constructor is invalid, if the handler above is being used on a <button>, because the target is not the form.

❓ Does Paste have opinions about whether consumers should use controlled or uncontrolled forms?
Since this is an implementation detail, we do not have a formal opinion about whether to use controlled or uncontrolled forms. I encourage you to check in with your team technical leads for guidance.

💡 If you are looking for a more modern approach to uncontrolled forms, I think folks have been using react-hook-form with uncontrolled components for a while. You can read more about different ways to use this package to create uncontrolled forms by checking out this discussion post from a fellow Twilion Alex.

Thanks for helping us make Paste better, looking forward to helping reach a resolution. 🙌

[arodriguezcortes]

Hi @andipants12 . Thanks a lot for your detailed answer and the CodeSandbox example.

Here's something along the lines of what I was trying to achieve yesterday:

import React from "react";
import { Box } from "@twilio-paste/core/box";
import { Checkbox } from "@twilio-paste/core/checkbox";

export const MyForm = () => {
  const handleSubmit = (e) => {
    e.preventDefault();

  const formElement = e.target;
  const formData = new FormData(formElement);
  const data = Object.fromEntries(formData); // No data from checkboxes or radio buttons here :(

    console.log(entries);
  };

  return (
    <form id="event-listner-example" onSubmit={handleSubmit}>
      <Checkbox
        id="mycheckbox"
        name="mycheckbox"
        value="mycheckbox"
      >
        First
      </Checkbox>
      <Input
        type="text"
        name="myinput"
        id="myinput"
        defaultValue="myinput"
      />
      <Box
        as="button"
        type="submit"
        form="event-listner-example"
        alignSelf="flex-start"
      >
        Submit form
      </Box>
    </form>
  );
};

As per your follow up questions:

1. Yes. As you can see in the above example, I was using the handleSubmit function as a callback for the onSubmit attribute on the <form> element.
2. i did not inspect the target. However, I was inspecting the result and I was getting the data from <Input> elements but not form checkboxes. In the above example, I get only the value from the text input but not from the checkbox. I also tried this approach in your CodeSandbox and get the same result (no checkbox data).
3. I was not using refs because I wanted to validate only on submit, so I decided to rely only on the FormData API.

This morning I had a call with the Console team and they also recommended using react-hook-form so today I refactored the whole component to use it. However, the examples you sent me are pretty useful to know that it's possible to implement uncontrolled forms with Paste elements. I suspect the error could be that I'm using a native <form> element instead of a <Box as="form">. Is that right? Or is it related to using the onSubmit attribute instead of window.addEventListener("submit", callback)?

[andioneto]

@arodriguezcortes Could you please create a codesandbox demonstrating what you are working on so we can debug this together?

I do not think that rendering the <form> as a Box should have any impact on the event handling since <Box as="form" ultimately render a styled form element to the DOM.

👀 We'll keep an eye out for the sandbox and go from there. Thank you!

[andioneto]

@arodriguezcortes I put your code in a new sandbox and am not able to reproduce the issue. Check it out here.

💡 If you are not seeing from data from the checkboxes on submission and the checkboxes are not checked, please remember that this is intended behavior for inputs of type "checkbox".

[arodriguezcortes]

Well. Now I'm quite ashamed haha 🙈 . I forgot about this behavior of checkboxes. It was probably the reason the whole time. Too much focus on other areas make me forget how forms work sometimes. Thank you a lot for your support, the examples you created, and your patience. Really appreciate it!

[andioneto]

You're very welcome! Glad you are unblocked and we could help. 😄