Skip to content

Commit e185052

Browse files
authored
Allow press of enter on dropdown and submit (#1444)
1 parent 858282c commit e185052

File tree

2 files changed

+27
-3
lines changed

2 files changed

+27
-3
lines changed

ui.frontend/src/view/FormContainer.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@ class FormContainer {
4747
#preventDefaultSubmit(){
4848
if(this._element) {
4949
this._element.addEventListener('keydown', (event) => {
50-
if (event.key === 'Enter') {
50+
const target = event.target;
51+
const isSubmitOrReset = target.tagName === 'INPUT' && (target.type === 'submit' || target.type === 'reset');
52+
if (event.key === 'Enter' && target.tagName !== 'SELECT' && target.tagName !== 'BUTTON' && !isSubmitOrReset) {
5153
event.preventDefault();
5254
}
5355
});

ui.tests/test-module/specs/formcontainer.cy.js

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -290,16 +290,38 @@ describe('Page/Form Authoring', function () {
290290

291291
context("Check default behaviour in Form Editor", function () {
292292
const pagePath = "/content/forms/af/core-components-it/samples/numberinput/validation.html";
293-
293+
let formContainerModel = null
294294
beforeEach(function () {
295-
cy.previewForm(pagePath);
295+
cy.previewForm(pagePath).then(p => {
296+
formContainerModel = p;
297+
})
296298
});
297299

298300
it('check the preventDefaultSubmit method by simulating keydown event on the form', function () {
299301
cy.get('.cmp-adaptiveform-container').then((formContainer) => {
302+
const [id, fieldView] = Object.entries(formContainerModel._fields)[0]
303+
300304
cy.stub(formContainer[0], 'onsubmit').as('submit');
301305
cy.get('form').trigger('keydown', {key: 'Enter'});
302306
cy.get('@submit').should('not.be.called');
307+
308+
// Trigger enter on a text input (should prevent submission)
309+
cy.get('input[type="text"]').first().type('{enter}');
310+
cy.get(`#${id} .cmp-adaptiveform-numberinput__errormessage`).should('not.have.text', 'This is required numberinput');
311+
312+
313+
});
314+
});
315+
316+
317+
it('button click should work on press of enter key', function () {
318+
cy.get('.cmp-adaptiveform-container').then((formContainer) => {
319+
const [id, fieldView] = Object.entries(formContainerModel._fields)[0]
320+
321+
// Trigger enter on a button (should not prevent submission)
322+
cy.get('button').first().type('{enter}');
323+
cy.get(`#${id} .cmp-adaptiveform-numberinput__errormessage`).should('have.text', 'This is required numberinput');
324+
303325
});
304326
});
305327

0 commit comments

Comments
 (0)