React: Pressing enter in a form input fails to submit the form

[ashleyryan]

Describe the bug

When using a plain input type="submit", hitting enter in a form field submits the form. When using a cds-button with type="submit", it does not.

How to reproduce

I believe this is a react only issue, as the form is submitted with a plain web component

react: https://stackblitz.com/edit/clarity-react-demo-wkfrre?file=src%2FApp.tsx
vanilla js: https://stackblitz.com/edit/clarity-react-demo-wkfrre?file=src/App.tsx

Steps to reproduce the behavior:

1. Focus in an input element
2. Click enter
3. Note that the on submit event is not called

Expected behavior

The form should submit

Versions

Clarity Core version:

• v5.x
• v6.x

Framework:

• Angular
• React
• Vue
• Other:

[ghillert]

I am observing the same issue in an Angular app.

This works: <button type="submit">Submit</button>
This does not: <cds-button type="submit">Login</cds-button>

I wonder if I miss something obvious here are as this is rather basic behavior.

[grahamford]

This looks like a regression as it was previously fixed here vmware-archive/clarity#6263 but the code in button.base.ts has changed significantly since that.

If it's any help, I've a Stackblitz of an Angular demo https://stackblitz.com/edit/cds-button-submit?file=src/app/app.component.ts