The form submit button works by clicking on the form submit button:
<button id="formBtn" onClick={submitForm(onFormSubmit)} >
Then I was trying to use "Enter" key to trigger that "submitForm" function by adding the code below in one text input in my form in TailwindCSS.
In the browser console I could only see log1, but both "submitForm" and "onFormSubmit" functions were not triggered. Why?
<input
onInput={handleInput}
onkeypress={(e)=>{
if(e.key === "Enter" && !e.shiftKey) {
console.log("log1:Enter detected")
submitForm(onFormSubmit)
}
}}
/>
Solved by this post: Trigger a button click with JavaScript on the Enter key in a text box
It is better to use "onkeyup", and use JavaScript to click on HTML buttons:
<input
onInput={handleInput}
onkeyup={(e) => onKeyUpEnter(e)}
/>
const onKeyUpEnter = (e: KeyboardEvent) => {
console.log("onKeyUpEnter. e:", e);
//e.preventDefault();
if (e.key === "Enter" && !e.shiftKey) {
console.log("Enter detected")
document.getElementById("formBtn")!.click();
//submitForm(onFormSubmit)
}
}