EDSC-2664: Preventing submission on enter

cypress/component/EDSCEchoForm.cy.js

@@ -5,7 +5,9 @@ import {
   prepopulatedXml,
   textfieldXml,
   treeWithSimplifyOutputXml,
-  notRelevantXml
+  notRelevantXml,
+  checkboxXml,
+  selectXml
 } from '../mocks/FormElement'
 import EDSCEchoform from '../../src'
 
@@ -179,4 +181,46 @@ describe('EDSCEchoform component', () => {
       rawModel: '<prov:options xmlns:prov="http://www.example.com/orderoptions"><prov:textreference>New prepopulated value</prov:textreference></prov:options>'
     })
   })
+
+  it('calls preventDefault when Enter is pressed on any form element', () => {
+    cy.window().then((win) => {
+      cy.stub(win.Event.prototype, 'preventDefault').as('preventDefaultStub')
+    })
+
+    const formTypes = [
+      {
+        xml: textfieldXml,
+        selector: '#textinput'
+      },
+      {
+        xml: checkboxXml,
+        selector: '#boolinput'
+      },
+      {
+        xml: selectXml,
+        selector: '#selectinput'
+      },
+      {
+        xml: treeWithSimplifyOutputXml,
+        selector: '#ef-tree_filter_input'
+      }
+    ]
+
+    formTypes.forEach(({ xml, selector }) => {
+      setup(xml)
+
+      cy.get(selector).trigger('keydown', {
+        key: 'Enter',
+        code: 'Enter',
+        which: 13,
+        keyCode: 13,
+        bubbles: true,
+        cancelable: true
+      })
+
+      cy.get('@preventDefaultStub').should('have.been.called')
+      // Reset the spy's history between iterations so each check is independent
+      cy.get('@preventDefaultStub').invoke('resetHistory')
+    })
+  })
 })

package.json

@@ -3,7 +3,7 @@
   "title": "Earthdata Search Components: ECHO Forms",
   "description": "A React component implementation of the ECHO Forms specification.",
   "main": "dist/index.js",
-  "version": "1.1.18",
+  "version": "1.1.19",
   "scripts": {
     "build": "webpack",
     "start": "webpack serve --config example/webpack.config.js --mode development",

src/components/FormBody/FormBody.jsx

@@ -13,10 +13,25 @@ export const FormBody = ({
 
   let formBodyClassnames = 'form'
 
+  /**
+   * Prevents form submission when Enter is pressed on any form element
+   * @param {Object} keyPressEvent event object
+   */
+  const onKeyDown = (keyPressEvent) => {
+    if (keyPressEvent.key === 'Enter') {
+      keyPressEvent.preventDefault()
+    }
+  }
+
   formBodyClassnames += ` ${className}`
 
   return (
-    <div className={elementClasses(formBodyClassnames, 'card')}>
+    // Disabling this rule because we want to capture events from bubbling up
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      className={elementClasses(formBodyClassnames, 'card')}
+      onKeyDown={onKeyDown}
+    >
       <div className={elementClasses('form__body', 'card-body')}>
         {
           ui.childElementCount > 0 && Array.from(ui.children).map((element) => (