vscode-webview-ui-toolkit icon indicating copy to clipboard operation
vscode-webview-ui-toolkit copied to clipboard

VSCodeButton triggers the form it belongs to onSubmit handler twice when triggered using the "Enter" key

Open MichaelHindley opened this issue 3 years ago • 1 comments

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]

MichaelHindley avatar Aug 21 '22 19:08 MichaelHindley

Like I said, in your other issue thanks for reporting this! I'll add it to my list of things to look into.

hawkticehurst avatar Aug 22 '22 21:08 hawkticehurst