diff --git a/cypress/component/EDSCEchoForm.cy.js b/cypress/component/EDSCEchoForm.cy.js
index cf00bc8..e73fd0c 100644
--- a/cypress/component/EDSCEchoForm.cy.js
+++ b/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: 'New prepopulated value'
})
})
+
+ 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')
+ })
+ })
})
diff --git a/package-lock.json b/package-lock.json
index 57ded7d..7ef60eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@edsc/echoforms",
- "version": "1.1.18",
+ "version": "1.1.19",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@edsc/echoforms",
- "version": "1.1.18",
+ "version": "1.1.19",
"license": "Apache-2.0",
"dependencies": {
"diff-js-xml": "^1.0.8",
diff --git a/package.json b/package.json
index 1d49467..42ea346 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/FormBody/FormBody.jsx b/src/components/FormBody/FormBody.jsx
index f462f79..ed3f121 100644
--- a/src/components/FormBody/FormBody.jsx
+++ b/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 (
-
+ // Disabling this rule because we want to capture events from bubbling up
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+
{
ui.childElementCount > 0 && Array.from(ui.children).map((element) => (