React state change from within button's click handler is preventing form submission

Question

Consider the code below:

function Item({name, _key})
{
   console.log('rendering Item')
   const [updatingName, setUpdatingName] = useState(false);
   const nameInputElement = useRef();

   useEffect(() => {
      if (updatingName) {
         nameInputElement.current.focus();
      }
   }, [updatingName]);

   function onUpdateClick() {
      setUpdatingName(true);
   }

   function onCancelClick() {
      setUpdatingName(false);
   }

   return (
      <div>
         <input ref={nameInputElement} type="text" defaultValue={name} name="name"
         disabled={!updatingName} />

         {!updatingName
         ? <>
            <button key={1} type="button" onClick={onUpdateClick}>Update</button>
            <button key={2} type="submit" name="delete" value={_key}>Remove</button>
         </>
         : <>
            <button key={3} type="submit" name="update" onClick={(e) => {setUpdatingName(false)}}>Save</button>
            <button key={4} type="button" onClick={onCancelClick}>Cancel</button>
         </>}
      </div>
   )
}

function ItemList({title})
{
   return <>
      <h1>{title}</h1>
      <form method="post" onSubmit={(e) => {console.log('submitting');e.preventDefault()}}>
         <Item name={'small'} _key={0} />
      </form>
   </>
}

export default ItemList;

The problem that I am facing is the click of the Save button. When it's clicked, as you can see, I trigger a state change. But at the same time, I also want the button to cause the underlying <form>'s submission.

(To check whether the form is submitted, I've prevented its default submit mechanism and instead gone with a simple log.)

However, it seems to be the case that when the state change is performed from within the onClick handler of the Save button, it ceases to submit the form. If I remove the state change from within the handler, it then does submit the form.

Why is this happening?

Live CodeSandbox demo

If you apply onClick on the save button then it will trigger onClick rather than onSubmit of form. One simple thing you can do is don't apply a Onclick on Save button. Add setUpdatingName(false) inside form onSubmit event — Gulshan Aggarwal
– Gulshan Aggarwal, Commented Dec 11, 2022 at 13:14
it still seems bit weird that it gets cancelled because the button gets removed asynchronously, so if you like you can even try file a github issue, to make sure this is not react bug. — gmoniava
– gmoniava, Commented Dec 11, 2022 at 13:35

Youssouf Oumar · Accepted Answer · 2022-12-12 10:42:28Z

2

When you call setUpdatingName(false) in save button's click handler, the button is removed from the DOM before submitting. You can add the logic for showing the buttons in ItemList, like below:

function ItemList({ title }) {
  const [updatingName, setUpdatingName] = useState(false);
  return (
    <>
      <h1>{title}</h1>
      <form
        method="post"
        onSubmit={(e) => {
          e.preventDefault();
          setUpdatingName(false);
          console.log("submitting");
        }}
      >
        <Item
          name={"small"}
          _key={0}
          updatingName={updatingName}
          setUpdatingName={setUpdatingName}
        />
      </form>
    </>
  );
}

export default ItemList;

function Item({ name, _key, updatingName, setUpdatingName }) {
  console.log("rendering Item");

  const nameInputElement = useRef();

  useEffect(() => {
    if (updatingName) {
      nameInputElement.current.focus();
    }
  }, [updatingName]);

  function onUpdateClick() {
    setUpdatingName(true);
  }

  function onCancelClick() {
    setUpdatingName(false);
  }

  return (
    <div>
      <input
        ref={nameInputElement}
        type="text"
        defaultValue={name}
        name="name"
        disabled={!updatingName}
      />

      {!updatingName ? (
        <>
          <button key={1} type="button" onClick={onUpdateClick}>
            Update
          </button>
          <button key={2} type="submit" name="delete" value={_key}>
            Remove
          </button>
        </>
      ) : (
        <>
          <button key={3} type="submit" name="update">
            Save
          </button>
          <button key={4} type="button" onClick={onCancelClick}>
            Cancel
          </button>
        </>
      )}
    </div>
  );
}

Also, you could use useTransition to ask React to delay the state update, so the submission happens first:

function Item({ name, _key }) {
  console.log("rendering Item");
  const [isPending, startTransition] = useTransition();
  const [updatingName, setUpdatingName] = useState(false);
  const nameInputElement = useRef();

  useEffect(() => {
    if (updatingName) {
      nameInputElement.current.focus();
    }
  }, [updatingName]);

  function onUpdateClick() {
    setUpdatingName(true);
  }

  function onCancelClick() {
    setUpdatingName(false);
  }

  return (
    <div>
      <input
        ref={nameInputElement}
        type="text"
        defaultValue={name}
        name="name"
        disabled={!updatingName}
      />

      {!updatingName ? (
        <>
          <button key={1} type="button" onClick={onUpdateClick}>
            Update
          </button>
          <button key={2} type="submit" name="delete" value={_key}>
            Remove
          </button>
        </>
      ) : (
        <>
          <button
            key={3}
            type="submit"
            name="update"
            onClick={(e) => {
              startTransition(() => setUpdatingName(false));
            }}
          >
            Save
          </button>
          <button key={4} type="button" onClick={onCancelClick}>
            Cancel
          </button>
        </>
      )}
    </div>
  );
}

edited Dec 12, 2022 at 10:42

answered Dec 11, 2022 at 13:19

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

gmoniava Over a year ago

Yeah I also noticed it happened because the button was being removed, but the button was being removed asynchronously, so it still seemed weird to me that submit was still cancelled.

coderboy Over a year ago

Yeah, this seems to be the right explanation of the strange behavior. Thanks.

coderboy Over a year ago

@yousoumar I find the asynchronous point in the first comment here quite reasonable. Why doesn't it matter?

gmoniava Over a year ago

@yousoumar In my comment I was just curious why the cancel happened despite the button removal being asynchronous. I didn't find that explanation in your edit.

coderboy Over a year ago

@GiorgiMoniava maybe it's because React itself defers the submission of function until the desired state changes occur inside any of its children. Cuz as we know, React does tap into the internals of form behavior. But for a decisive explanation, I think I need to take this to the ReactJS repo.

|

Collectives™ on Stack Overflow

React state change from within button's click handler is preventing form submission

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related