Form submits with disabled button

[arome]

Describe the bug (current behavior)

Disabled buttons in a form still triggers the submit action on click.
Also since the buttons are not "actually" disabled, when testing with testing library, expect(submitButton).toBeDisabled() returns false even thought the button is visually disabled.

Expected Behavior

If the button is disabled and is clicked, the form should not be submitted.

Link to minimal repro

https://stackblitz.com/edit/github-vzhjqhvd?file=src%2FApp.tsx

Steps To Reproduce

1. Click on disabled button from iTwinUI in form 1, the form will still submit.
2. Click on disabled normal html button in form 2, the form will not submit.

Package Version

• I'm using the latest version of iTwinUI.

Anything else?

I'm using version 3.16.0

[mayank99]

This is happening because iTwinUI uses a custom, more accessible implementation of disabled buttons (#1461). The simplest solution would be to not use type="submit" when the button is disabled. You can do that manually for now, but in a future release we can handle it automatically so that the linked sandbox works as expected.

Aside: The toBeDisabled() not matching is a bug in testing-library. iTwinUI sets aria-disabled on the button, so it should match (it does so in Playwright for comparison).