function onClick is triggered when I don't click on the button in form react

Question

I created a form and within I want 2 ways of submit :

• one by filling input field and press enter
• one by recording voice (I use the library react-speech-recognition)

Since I added the second way, the input field doesn't work. I can write something and press enter but it will necessarily call the function bind to the onClick of record-voice button, why ?

Here is the code of the main component

<form onSubmit={ handleSubmit } style={Style.myform}>
                            <Dictaphone values={values} write_speech={this.write_speech} perso={this.state.perso} question={this.state.question} />

                            <div className={Style.mydiv}>

                                <input  className={Style.n_0} id="question" type="text" onChange={handleChange} value={values.question} disabled={isSubmitting} placeholder="Type here"/>
                            
                            </div>
</form>

So here you can see the first method in the input and the second in the Dictaphone component, it calls the following function:

 write_speech = (text, values) => {
    console.log("write_speech");
    console.log(values)
    this.setState({question: document.getElementById("montexte").getAttribute("montexte")}, function () {
        values['question'] = this.state.question
    });
}

And the Dicatphone content :

return (
    <div>
      
      <button onClick={SpeechRecognition.startListening}  type="button"> Start</button>
      <button onClick={(transcript) => props.write_speech(transcript, props.values)}>Stop</button>    
      <button onClick={() => alert("toto")}>Reset</button>
      <p id="montexte" type="text" className={Style.welcome_text} hidden={true} montexte={transcript} />
    </div>
  );

So I can click Start to record and Stop to call write_speech, but when I just use the main component and fill the input it necessarily call write_speech too. But I don't want that.

I made a simple test and curiously it doesn't call the 3rd button function () => alert("toto")

What I already tried: the 3 methods described in this post but the same problem persisted for me https://stackoverflow.com/a/34226188/10971146

Thanks for having read

Answer 1

Solution

Your stop and reset buttons must have type="button", or else the first of the two will behave as a submit button. If you need a form submission button, use an explicit submit button of type="submit".

Why this happens

By default, the type for the HTML button element is submit. When you type text in a form input and press Enter, that acts as a submit event. Thus, the form calls the click handler for the first button it sees.

Here's a JSFiddle showing what happens if you have a form with an explicit submit button positioned after a button without an explicit type attribute—the button's click handler gets called: https://jsfiddle.net/r128cfyn/7/. Even though the form's submit button is explicit, the first button is also a submit button because it's not type="button".

Answer 2

Try using

onclick="event.preventDefault()";

to prevent the default behavior of the buttons.

More info here