Components: Tab Panel: Butttons trigger form submission

[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

[designsimply]

Any chance you can provide a more detailed code example for step one? I would like to help test but need more specific testing instructions as I am new to testing custom code cases like this one.

[TimothyBJacobs]

Sure!

Clicking on one of the tab panel buttons will cause an alert to appear.

import {TabPanel} from '@wordpress/components';

function App() {
	return (
		<form onSubmit={alert}>
			<TabPanel className="my-tab-panel"
					  activeClass="active-tab"
					  tabs={ [
						  {
							  name: 'tab1',
							  title: 'Tab 1',
							  className: 'tab-one',
						  },
						  {
							  name: 'tab2',
							  title: 'Tab 2',
							  className: 'tab-two',
						  },
					  ] }>
				{
					( tab ) => <p>{ tab.title }</p>
				}
			</TabPanel>
		</form>
	)
}

[designsimply]

Thanks! I thought I could copy paste in a test but I am not sure where to put the code. I'll leave the Needs Technical Feedback label and wait for a developer who knows a bit more about how to test this to respond. 😊