Skip to content

[Bug]: Click events on nested <span> inside <button type="submit"> fail to trigger form submission (Activation Behavior regression since v15.0.0) #2081

@mksawic

Description

@mksawic

Describe the bug
Since version 15.0.0 (and likely persisting through the latest 20.x releases), click events triggered on a <span> element nested within a <button type="submit"> do not correctly trigger the button's default activation behavior. While the click event may bubble, the expected submit event on the parent <form> is never dispatched.

To Reproduce
Steps to reproduce the behavior:

  1. Open the reproduction link: https://stackblitz.com/edit/vitejs-vite-vbujtucz
  2. Run the provided Vitest suite with npm test
  3. Observe the failure in the following test case:
it('click span inside submit button should submit the form', async () => {
  render(<App />);

  // Clicking the span instead of the button directly
  await userEvent.click(screen.getByText('Submit inside span'));

  // This assertion fails because the submit event never reaches the form
  expect(screen.getByText('Form was submitted')).toBeInTheDocument();
});

Expected behavior
According to the HTML specification, a click on a descendant of a <button> should trigger the button's activation behavior. In the case of type="submit", it should result in a submit event being fired on the associated form.

Screenshots
Image

Device:

  • OS: All
  • Environment: Vitest / Node.js
  • Happy DOM Version: 15.0.0 through 20.x

Additional context
The issue appeared following the major refactor in version 15.0.0 ("Next Generation" event engine). Investigation into event.composedPath() suggests that the link between the nested target and the button's activation behavior is being lost or interrupted during the transition between event phases.

A manual workaround using form.requestSubmit() in a global listener fixes the issue, further indicating that the native bridge between a button-child-click and form-submission is currently broken in the internal DOM logic.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions