bug: IonButton type="submit" does not submit form when enter pressed in inputs
See original GitHub issueBug Report
Ionic version: [x] @ionic/react 4.9.0-rc.2
Current behavior:
IonButtons
created with type="submit"
do not submit the forms when a user presses the “enter” key in an input field.
You can see that the generated Shadow DOM input does NOT contain the type="submit"
attribute.
Expected behavior:
Standard HTML button
s created with type="submit"
will automatically attempt to submit the form when the user presses “enter” in an input field. For accessibility, IonButtons
inside a form should do the same.
Steps to reproduce: In the form below, press the “enter” key and observe that the form does not attempt to submit. Related code:
<form onSubmit={handleSubmit1}>
<IonItem>
<IonLabel>Ionic Input</IonLabel>
<IonInput
name="ionicInput1"
id="ionicInput1"
placeholder="Press enter in this field"
/>
</IonItem>
<IonItem>
<label for="genericInput1">Generic Input</label>
<input
type="text"
name="genericInput1"
id="genericInput1"
placeholder="Press enter in this field"
/>
</IonItem>
<IonButton type="submit">Submit</IonButton>
</form>
Working sample that demonstrate a regular <button type="submit">Submit</button>
does properly submit the form and that an IonButton type="submit"/>
does not:
Other information: None
Ionic info:
Ionic:
Ionic CLI : 5.2.5 (/Users/jn/.nvm/versions/node/v10.16.3/lib/node_modules/ionic)
Ionic Framework : @ionic/react 4.9.0-rc.2
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v10.16.3 (/Users/jn/.nvm/versions/node/v10.16.3/bin/node)
npm : 6.9.0
OS : macOS Mojave
Issue Analytics
- State:
- Created 4 years ago
- Reactions:10
- Comments:24 (5 by maintainers)
Top GitHub Comments
Adding
type="submit"
does affect the shadon-dom correctly for me - but it doesn’t allow the enter key to submit the form. A hidden input does work on the other hand. This feels wrong though.Issue already closed one year ago #15136