Trigger submit on form section Enter key press (aws-amplify#5467)

* Trigger submit on form section Enter key press

* Add base unit test

packages/amplify-ui-components/src/components/amplify-form-section/amplify-form-section.spec.ts

@@ -12,6 +12,11 @@ describe('amplify-form-section spec:', () => {
     it('should render `Submit` for the button text', () => {
       expect(formSection.submitButtonText).toEqual('Submit');
     });
+
+    it('`handleKeyDown` should be defined', () => {
+      expect(formSection.handleKeyDown).toBeDefined();
+    })
+
   });
   describe('Render logic ->', () => {
     it('should render a form section with a submit button text of `Go`', async () => {

packages/amplify-ui-components/src/components/amplify-form-section/amplify-form-section.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, h, FunctionalComponent } from '@stencil/core';
+import { Component, Prop, h, FunctionalComponent, Listen } from '@stencil/core';
 
 @Component({
   tag: 'amplify-form-section',
@@ -19,6 +19,13 @@ export class AmplifyFormSection {
   /** Secondary footer component or text */
   @Prop() secondaryFooterContent: string | FunctionalComponent | null = null;
 
+  @Listen('keydown')
+  handleKeyDown(ev: KeyboardEvent) {
+    if (ev.key === 'Enter') {
+      this.handleSubmit(ev);
+    }
+  }
+
   render() {
     return (
       <form onSubmit={this.handleSubmit}>