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.
Clicking on the submit button triggers form onSubmit before its own onClick
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
Pressing Enter on a button with type="button" should behave like pressing space or clicking on it and shouldn't submit the form
The order of function calls should be reversed like native html buttons
Pressing Enter on a submit button should submit only once
π― Current Behavior
Pressing Enter on the cancel button triggers the submit button onClick and the form submit
Pressing Enter on the FAST submit button, then Enter on the native html button fired onClick and form onSubmit in different orders
Pressing Enter on the submit button triggers handlers twice
π Possible Solution
The FASTButton class inherits from FormAssociatedButton which inherits from FormAssociatedFormAssociated 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
OS & Device: Windows 10
Browser: Microsoft Edge Version 115.0.1901.183 (Official build) (64-bit), also tried Firefox 115.0.2 (64-bit)
π Bug Report
type="button"
and atype="submit"
, focusing on and pressing Enter on the first button triggers formonSubmit
andonClick
handler of the submit button as well. Pressing space or clicking behaves normally.onSubmit
before its ownonClick
onClick
and formonSubmit
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
type="button"
should behave like pressing space or clicking on it and shouldn't submit the formπ― Current Behavior
onClick
and formonSubmit
in different ordersπ Possible Solution
The
FASTButton
class inherits fromFormAssociatedButton
which inherits fromFormAssociated
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