Skip to content

Components: Tab Panel: Butttons trigger form submission #11767

@TimothyBJacobs

Description

@TimothyBJacobs

Describe the bug
The buttons in the tab panel component trigger form submission.

To Reproduce
Steps to reproduce the behavior:

  1. Include a TabPanel within a <form> element with an onSubmit handler.
  2. Click on one of the tab panel buttons.
  3. The form's onSubmit handler is triggered.

Expected behavior
The tab to change but the form not to be submitted.

Possible Solutions

  1. preventDefault on the click event.
  2. Add a type="button" to the TabButton component.
  3. Allow passing additional props to the TabButton via the tabs prop.

Desktop (please complete the following information):

  • OS: macOS
  • Browser Safari, Chrome, etc...
  • Version 12

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions