microsoft / fast

The adaptive interface system for modern web experiences.
https://www.fast.design
Other
9.28k stars 595 forks source link

fix: fast buttons inside form don't behave correctly #6790

Closed sm3rta closed 5 months ago

sm3rta commented 1 year ago

πŸ› Bug Report

  1. When a form has two Fast buttons, one type="button" and a type="submit", focusing on and pressing Enter on the first button triggers form onSubmit and onClick handler of the submit button as well. Pressing space or clicking behaves normally.
  2. Clicking on the submit button triggers form onSubmit before its own onClick
  3. Pressing enter on the submit button triggers onClick and form onSubmit twice, this has already been reported in #6704

πŸ’» Repro or Code Sample

repro Interestingly, in the repro, the second form that has only one button with type="button" doesn't show this weird behavior

πŸ€” Expected Behavior

  1. Pressing Enter on a button with type="button" should behave like pressing space or clicking on it and shouldn't submit the form
  2. The order of function calls should be reversed like native html buttons
  3. Pressing Enter on a submit button should submit only once

😯 Current Behavior

  1. Pressing Enter on the cancel button triggers the submit button onClick and the form submit Screenshot_6
  2. Pressing Enter on the FAST submit button, then Enter on the native html button fired onClick and form onSubmit in different orders Screenshot_8
  3. Pressing Enter on the submit button triggers handlers twice Screenshot_9

πŸ’ Possible Solution

The FASTButton class inherits from FormAssociatedButton which inherits from FormAssociated FormAssociated has a _keypressHandler that dictates pressing enter on any element inside the form (including the submit button itself) will trigger a click event on the submit button inside the form Maybe a solution would be to check if the element is a button and prevent the click event from firing

πŸ”¦ Context

We're trying to build a form with 2 buttons, one for canceling the form and another for submitting. After investigating, we found the two other issues.

🌍 Your Environment

janechu commented 5 months ago

Unfortunately @microsoft/fast-foundation is being deprecated, refer to #6955.