vscode-webview-ui-toolkit
vscode-webview-ui-toolkit copied to clipboard
VSCodeButton triggers the form it belongs to onSubmit handler twice when triggered using the "Enter" key
Describe the bug
VSCodeButton triggers the form it belongs to onSubmit handler twice when triggered using the "Enter" key, firing two unique events to the onSubmit handler function. If clicked with mouse, the onSubmit handler is called once, as expected.
Working workaround is to use any other button component.
Actual behavior:
Using the VSCodeButton react component to submit a form,
and the form submit is through pressing "enter",
the forms onSubmit handler triggers twice.
Compared to standard element: Using a standard button element to submit a form, and the form submit is through pressing "enter", the forms onSubmit handler triggers one time.
Desired behavior
Using the VSCodeButton react component to submit a form,
and the form submit is through pressing "enter",
the forms onSubmit handler triggers one time.
To reproduce
Inside a webview panel:
<form onSubmit={(e) => {
e.preventDefault()
console.log(e) // logs once
}}>
<button>Button</button>
</form>
<form onSubmit={(e) => {
e.preventDefault()
console.log(e) // logs twice
}}>
// note that "type='submit'" is required here due to a different bug
<VSCodeButton type="submit">Button</VSCodeButton>
</form>
Desktop (please complete the following information):
- OS Version: [e.g.
macOS 12.4] - Toolkit Version: [e.g.
v1.0.0]
Like I said, in your other issue thanks for reporting this! I'll add it to my list of things to look into.