Skip to content

Commit bfd10b6

Browse files
authored
[Button] Fix running formAction when passed (#47185)
1 parent 0dc423f commit bfd10b6

File tree

2 files changed

+30
-1
lines changed

2 files changed

+30
-1
lines changed

packages/mui-material/src/ButtonBase/ButtonBase.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,10 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) {
257257

258258
const buttonProps = {};
259259
if (ComponentProp === 'button') {
260-
buttonProps.type = type === undefined ? 'button' : type;
260+
const hasFormAttributes = !!other.formAction;
261+
// ButtonBase was defaulting to type="button" when no type prop was provided, which prevented form submission and broke formAction functionality.
262+
// The fix checks for form-related attributes and skips the default type to allow the browser's natural submit behavior (type="submit").
263+
buttonProps.type = type === undefined && !hasFormAttributes ? 'button' : type;
261264
buttonProps.disabled = disabled;
262265
} else {
263266
if (!other.href && !other.to) {
@@ -395,6 +398,10 @@ ButtonBase.propTypes /* remove-proptypes */ = {
395398
* if needed.
396399
*/
397400
focusVisibleClassName: PropTypes.string,
401+
/**
402+
* @ignore
403+
*/
404+
formAction: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
398405
/**
399406
* @ignore
400407
*/

packages/mui-material/src/ButtonBase/ButtonBase.test.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1294,4 +1294,26 @@ describe('<ButtonBase />', () => {
12941294
expect(ref.current).not.to.equal(null);
12951295
});
12961296
});
1297+
1298+
describe('form attributes', () => {
1299+
it('should not set default type when formAction is present', async function test() {
1300+
if (window.navigator.userAgent.includes('jsdom')) {
1301+
this.skip();
1302+
}
1303+
1304+
const formActionSpy = spy();
1305+
const { user } = render(
1306+
<form>
1307+
<ButtonBase formAction={formActionSpy}>Submit</ButtonBase>
1308+
</form>,
1309+
);
1310+
const button = screen.getByRole('button');
1311+
1312+
// Should not have type="button" when formAction is present
1313+
expect(button).not.to.have.attribute('type', 'button');
1314+
expect(button).to.have.attribute('formaction');
1315+
await user.click(button);
1316+
expect(formActionSpy.callCount).to.equal(1);
1317+
});
1318+
});
12971319
});

0 commit comments

Comments
 (0)