search

vmware-clarity / core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
https://clarity.design
MIT License
163 stars 42 forks source link

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

Open ashleyryan opened 2 years ago

ashleyryan commented 2 years ago

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:

Framework:

ghillert commented 1 year ago

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 commented 1 year ago

This looks like a regression as it was previously fixed here https://github.com/vmware/clarity/issues/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