Bug: about react

[den319]

Hi, @mayank1513 can you try the code I have mentioned below , I think it will solve your problem and let me know if there is anything wrong.

`export default function App() {
const [clicked, setClicked] = useState(false);

return (
<form
onSubmit={(e) => {
e.preventDefault();
console.log("form submitted!");
}}
>
{!clicked ? (
<button type="submit" onClick={() => setClicked(true)}>
"button"

) : (
<button type="button" onClick={() => setClicked(false)}>
"submit"

)}

);
}`

[mayank1513]

Hi, why are you tagging type="submit" as "button" and vice-versa? These values are used to demonstrate the current working and understand why it is working this way.

[mayank1513]

Action corresponding to the button which I click should be triggered. Not the other button.

[matheusschreiber]

This behavior that you are seeing is because the form's onSubmit event is triggered regardless of the button type always.... Maybe you should move your state modifiers outside the buttons

Try this

import { useState } from "react";

export default function App() {
  const [clicked, setClicked] = useState(false);

  const handleFormSubmit = (e) => {
    e.preventDefault();
    if (clicked) {
      setClicked(false)
      console.log('form submitted!');
      // Perform other necessary actions
    } else {
      setClicked(true)
    }
  };

  return (
    <form>
      {!clicked ? (
        <button type="button" onClick={(e)=>handleFormSubmit(e)}>
          Type "button"
        </button>
      ) : (
        <button type="submit" onClick={(e)=>handleFormSubmit(e)}>
          Type "submit"
        </button>
      )}
    </form>
  );
}

You can also use e.target.form.submit inside the handler to in fact submit the form.

[mayank1513]

Please check the code sandbox carefully. Event is triggered only for one type of button, not both. You can even verify this by removing the condition and rendering both buttons together.

[vitaliyirtlach]

I changed code and add a preventDefault to button

import { useState } from "react";

export default function App() {
  const [clicked, setClicked] = useState(false);

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        setClicked(true);
        console.log("form submitted!");
      }}
    >
      {!clicked ? (
        <button type="submit">Type "submit"</button>
      ) : (
        <button
          type="button"
          onClick={(e) => {
            e.preventDefault();
            setClicked(false);
          }}
        >
          Type "button"
        </button>
      )}
    </form>
  );
}

[arslanarjumand012]

Greetings @mayank1513 Here is the modified code.

import { useState } from "react";

export default function App() {
const [clicked, setClicked] = useState(false);

return (
<form
onSubmit={(e) => {
e.preventDefault();
console.log("form submitted!");
}}
>
{!clicked ? (
<button
type="button"
onClick={() => {
const timer = setTimeout(() => {
setClicked(true);
clearTimeout(timer);
}, 0);
}}
>
Type "button"

) : (
<button
type="submit"
onClick={() => {
const timer = setTimeout(() => {
setClicked(false);
clearTimeout(timer);
}, 0);
}}
>
Type "submit"

)}

);
}

The issue was that React updates the virtual dom faster than the real dom. So we must add the async behaviour to the onClick event where the state is being changed.

[den319]

sorry for my misunderstanding as you mentioned in issue that expected behaviour should be when I click on "submit" type button, the form should submitted. That is why I changed the types of buttons. So can you please elaborate the issue like what kind of behaviour do you expect and at which situation. Thank you.

…

On Tue, Jul 4, 2023 at 2:39 PM Mayank ***@***.***> wrote: Hi, why are you tagging type="submit" as "button" and vice-versa? These values are used to demonstrate the current working and understand why it is working this way. — Reply to this email directly, view it on GitHub <#27041 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A25L4LQGFQNGEV7WNJHSSI3XOPMTNANCNFSM6AAAAAAZ34KK3A> . You are receiving this because you commented.Message ID: ***@***.***>

[vitaliyirtlach]

To resolve it, I assigned each button unique key prop. Hope this helped solve the problem

[mayank1513]

To resolve it, I assigned each button unique key prop. Hope this helped solve the problem

After assigning a unique key, the form-submit event is not fired at all.

[den319]

so can you explain why this unususal behaviour was happening? I mean when we are clicking "type= button" button the onSubmit event was triggering.

[mayank1513]

I changed code and add a preventDefault to button

import { useState } from "react";

export default function App() {
  const [clicked, setClicked] = useState(false);

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        setClicked(true);
        console.log("form submitted!");
      }}
    >
      {!clicked ? (
        <button type="submit">Type "submit"</button>
      ) : (
        <button
          type="button"
          onClick={(e) => {
            e.preventDefault();
            setClicked(false);
          }}
        >
          Type "button"
        </button>
      )}
    </form>
  );
}

This does not address the issue.

[meetvanapariya]

import { useState } from "react";

export default function App() {
  const [clicked, setClicked] = useState(true);

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        console.log("form submitted!");
      }}
    >
      {clicked && (
        <button type="submit" onClick={() => setClicked(false)}>
          Type "submit"
        </button>
      )}
      <button type="submit" onClick={() => setClicked(true)}>
        Type "submit 2"
      </button>
    </form>
  );
}

i believe when state change from false to true it will immediately remove Type "submit" button and it will also clean pending effects like form submit check above code

• conditional rendering and without conditional rendering

[mayank1513]

Greetings @mayank1513 Here is the modified code.

import { useState } from "react";

export default function App() {
const [clicked, setClicked] = useState(false);

return (
<form
onSubmit={(e) => {
e.preventDefault();
console.log("form submitted!");
}}
>
{!clicked ? (
<button
type="button"
onClick={() => {
const timer = setTimeout(() => {
setClicked(true);
clearTimeout(timer);
}, 0);
}}
>
Type "button"

) : (
<button
type="submit"
onClick={() => {
const timer = setTimeout(() => {
setClicked(false);
clearTimeout(timer);
}, 0);
}}
>
Type "submit"

)}

);
}

The issue was that React updates the virtual dom faster than the real dom. So we must add the async behaviour to the onClick event where the state is being changed.

This is not the expected behavior. Moreover, when you add unique keys to buttons, none of them submit. We are not looking for workarounds, but trying to improve React library itself to handle this gracefully.