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) => (