feat: Form elements submits the form on enter (#288)

* submit form on enter

* ops. console log remove

* binding formElement to this in onkeypress method

* submit on enter

* submit on enter for checkbox

* radio and slider submit on enter

* remove old eventlistener

* replace submit with requestSubmit to mimic normal form submit behaviour

* add addEventListener to all instances regardless of type to allow for dynamic type checking

* add tests to check if uui-input correctly submits the form

* add tests to see if relevant form elements submits correctly when pressing the 'Enter' key

Co-authored-by: Jacob Overgaard <[email protected]>

Author: loivsen

packages/uui-base/lib/mixins/FormControlMixin.ts

@@ -18,6 +18,7 @@ export declare abstract class FormControlMixinInterface extends LitElement {
   get validationMessage(): string;
   get validity(): ValidityState;
   public setCustomValidity(error: string): void;
+  public submit(): void;
   protected _value: FormDataEntryValue | FormData;
   protected _internals: any;
   protected abstract getFormElement(): HTMLElement | undefined;
@@ -325,6 +326,10 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
       this.pristine = false;
     };
 
+    public submit() {
+      this._form?.requestSubmit();
+    }
+
     public formAssociatedCallback() {
       this._removeFormListeners();
       this._form = this._internals.form;

packages/uui-boolean-input/lib/uui-boolean-input.element.ts

@@ -134,12 +134,19 @@ export abstract class UUIBooleanInputElement extends FormControlMixin(
       this._value = 'on';
     }
     this.inputRole = inputRole;
+    this.addEventListener('keypress', this._onKeypress);
   }
 
   protected getFormElement(): HTMLElement {
     return this._input;
   }
 
+  private _onKeypress(e: KeyboardEvent): void {
+    if (e.key == 'Enter') {
+      this.submit();
+    }
+  }
+
   public hasValue(): boolean {
     return this.checked;
   }

packages/uui-boolean-input/lib/uui-boolean-input.test.ts

@@ -8,6 +8,7 @@ import {
   expect,
   fixture,
   html,
+  oneEvent,
   unsafeStatic,
 } from '@open-wc/testing';
 import { html as litHTMLLiteral } from 'lit';
@@ -27,6 +28,10 @@ const tagName = defineCE(
 
 const tag = unsafeStatic(tagName);
 
+const preventSubmit = (e: SubmitEvent) => {
+  e.preventDefault();
+};
+
 describe('UUIBooleanInputElement', () => {
   let element: any;
   let label: HTMLLabelElement;
@@ -85,7 +90,7 @@ describe('BooleanInputBaseElement in a Form', () => {
   let element: any;
   beforeEach(async () => {
     formElement = await fixture(
-      html`<form><${tag} name="test" value="testValue"
+      html`<form @submit=${preventSubmit}><${tag} name="test" value="testValue"
       label="test label"></${tag}></form>`
     );
     element = formElement.firstChild;
@@ -119,6 +124,18 @@ describe('BooleanInputBaseElement in a Form', () => {
     expect(formData.get(`test`)).to.equal('on');
   });
 
+  describe('submit', () => {
+    it('should submit when pressing enter', async () => {
+      const listener = oneEvent(formElement, 'submit');
+      element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' }));
+
+      const event = await listener;
+      expect(event).to.exist;
+      expect(event.type).to.equal('submit');
+      expect(event!.target).to.equal(formElement);
+    });
+  });
+
   describe('validation', () => {
     let formElement: HTMLFormElement;
     let element: any;

packages/uui-form/lib/uui-form.element.ts

@@ -17,7 +17,6 @@ export class UUIFormElement extends LitElement {
     if (this._formElement) {
       this._formElement.removeEventListener('submit', this._onSubmit);
       this._formElement.removeEventListener('reset', this._onReset);
-      this._formElement.removeEventListener('keypress', this._onKeypress);
     }
 
     const formElements = (event.target as HTMLSlotElement)
@@ -29,10 +28,6 @@ export class UUIFormElement extends LitElement {
       this._formElement.setAttribute('novalidate', '');
       this._formElement.addEventListener('submit', this._onSubmit);
       this._formElement.addEventListener('reset', this._onReset);
-      this._formElement.addEventListener(
-        'keypress',
-        this._onKeypress.bind(this)
-      );
     }
   }
 
@@ -58,14 +53,6 @@ export class UUIFormElement extends LitElement {
     (event.target as HTMLFormElement).removeAttribute('submit-invalid');
   }
 
-  private _onKeypress(event: KeyboardEvent) {
-    if (event.key === 'Enter') {
-      if (this._formElement) {
-        this._formElement.dispatchEvent(new SubmitEvent('submit'));
-      }
-    }
-  }
-
   render() {
     return html`<slot @slotchange=${this._onSlotChanged}></slot>`;
   }

packages/uui-input/lib/uui-input.element.ts

@@ -249,6 +249,7 @@ export class UUIInputElement extends FormControlMixin(LitElement) {
     this.addEventListener('blur', () => {
       this.style.setProperty('--uui-show-focus-outline', '');
     });
+    this.addEventListener('keypress', this._onKeypress);
 
     this.addValidator(
       'tooShort',
@@ -269,6 +270,12 @@ export class UUIInputElement extends FormControlMixin(LitElement) {
     this.addFormControlElement(this._input);
   }
 
+  private _onKeypress(e: KeyboardEvent): void {
+    if (this.type !== 'color' && e.key == 'Enter') {
+      this.submit();
+    }
+  }
+
   /**
    * This method enables <label for="..."> to focus the input
    */

packages/uui-input/lib/uui-input.test.ts

@@ -9,6 +9,14 @@ import {
 import { UUIInputElement } from './uui-input.element';
 import { UUIInputEvent } from './UUIInputEvent';
 
+const preventSubmit = (e: SubmitEvent) => {
+  e.preventDefault();
+};
+
+function sleep(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
 describe('UuiInputElement', () => {
   let element: UUIInputElement;
   let input: HTMLInputElement;
@@ -136,7 +144,7 @@ describe('UuiInput in Form', () => {
   beforeEach(async () => {
     formElement = await fixture(
       html`
-        <form>
+        <form @submit=${preventSubmit}>
           <uui-input label="a input label" name="input" value="Hello uui-input">
           </uui-input>
         </form>
@@ -160,6 +168,35 @@ describe('UuiInput in Form', () => {
     await expect(formData.get('input')).to.be.equal('anotherValue');
   });
 
+  describe('submit', () => {
+    it('should submit when pressing enter', async () => {
+      const listener = oneEvent(formElement, 'submit');
+      element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' }));
+
+      const event = await listener;
+      expect(event).to.exist;
+      expect(event.type).to.equal('submit');
+      expect(event!.target).to.equal(formElement);
+    });
+
+    it('should not submit if type=color', async () => {
+      element.type = 'color';
+      await elementUpdated(element);
+
+      let isFulfilled = false;
+
+      const listener = oneEvent(formElement, 'submit');
+
+      listener.then(() => (isFulfilled = true));
+
+      element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' }));
+
+      await sleep(100);
+
+      expect(isFulfilled).to.be.false;
+    });
+  });
+
   describe('validation', () => {
     describe('required', () => {
       beforeEach(async () => {

packages/uui-radio/lib/uui-radio-group.element.ts

@@ -74,6 +74,7 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
   constructor() {
     super();
     this.addEventListener('keydown', this._onKeydown);
+    this.addEventListener('keypress', this._onKeypress);
   }
 
   /**
@@ -247,6 +248,12 @@ export class UUIRadioGroupElement extends FormControlMixin(LitElement) {
     }
   }
 
+  private _onKeypress(e: KeyboardEvent): void {
+    if (e.key == 'Enter') {
+      this.submit();
+    }
+  }
+
   private _fireChangeEvent() {
     this.pristine = false;
     this.dispatchEvent(new UUIRadioGroupEvent(UUIRadioGroupEvent.CHANGE));

packages/uui-radio/lib/uui-radio-group.test.ts

@@ -4,6 +4,10 @@ import { UUIRadioGroupElement } from './uui-radio-group.element';
 import { UUIRadioElement } from './uui-radio.element';
 import { UUIRadioGroupEvent } from './UUIRadioGroupEvent';
 
+const preventSubmit = (e: SubmitEvent) => {
+  e.preventDefault();
+};
+
 describe('UuiRadio', () => {
   let element: UUIRadioGroupElement;
   let radios: UUIRadioElement[];
@@ -127,7 +131,7 @@ describe('UuiRadioGroup in a Form', () => {
   let radios: UUIRadioElement[];
   beforeEach(async () => {
     formElement = await fixture(
-      html` <form action="">
+      html` <form @submit=${preventSubmit} action="">
         <uui-radio-group name="Test">
           <uui-radio value="Value 1" label="Option 1">Option 1</uui-radio>
           <uui-radio value="Value 2" label="Option 2"></uui-radio>
@@ -161,6 +165,18 @@ describe('UuiRadioGroup in a Form', () => {
     const formData = new FormData(formElement);
     expect(formData.get(`${element.name}`)).to.be.equal('');
   });
+
+  describe('submit', () => {
+    it('should submit when pressing enter', async () => {
+      const listener = oneEvent(formElement, 'submit');
+      element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' }));
+
+      const event = await listener;
+      expect(event).to.exist;
+      expect(event.type).to.equal('submit');
+      expect(event!.target).to.equal(formElement);
+    });
+  });
 });
 
 describe('UuiRadioGroup when multiple radio childs are checked', () => {

packages/uui-slider/lib/uui-slider.element.ts

@@ -1,12 +1,12 @@
-import { LitElement, html, css, svg, nothing } from 'lit';
+import { UUIHorizontalPulseKeyframes } from '@umbraco-ui/uui-base/lib/animations';
+import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { css, html, LitElement, nothing, svg } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-
 import { styleMap } from 'lit/directives/style-map.js';
+
 import { nativeInputStyles } from './native-input.styles';
-import { UUIHorizontalPulseKeyframes } from '@umbraco-ui/uui-base/lib/animations';
 import { UUISliderEvent } from './UUISliderEvents';
-import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 
 const TRACK_PADDING = 12;
 const STEP_MIN_WIDTH = 24;
@@ -309,6 +309,7 @@ export class UUISliderElement extends FormControlMixin(LitElement) {
     this.addEventListener('blur', () => {
       this.style.setProperty('--uui-show-focus-outline', '');
     });
+    this.addEventListener('keypress', this._onKeypress);
   }
 
   /**
@@ -372,6 +373,12 @@ export class UUISliderElement extends FormControlMixin(LitElement) {
     this._stepWidth = this._calculateStepWidth();
   };
 
+  private _onKeypress(e: KeyboardEvent): void {
+    if (e.key == 'Enter') {
+      this.submit();
+    }
+  }
+
   @state()
   protected _steps: number[] = [];
 

packages/uui-slider/lib/uui-slider.test.ts

@@ -1,14 +1,20 @@
+import '.';
+
 import {
-  html,
-  fixture,
-  expect,
   elementUpdated,
+  expect,
+  fixture,
+  html,
   oneEvent,
 } from '@open-wc/testing';
+
 import { UUISliderElement } from './uui-slider.element';
-import './index';
 import { UUISliderEvent } from './UUISliderEvents';
 
+const preventSubmit = (e: SubmitEvent) => {
+  e.preventDefault();
+};
+
 describe('UuiSlider', () => {
   let element: UUISliderElement;
   let input: HTMLInputElement;
@@ -116,7 +122,7 @@ describe('UuiSlider in Form', () => {
   let element: UUISliderElement;
   beforeEach(async () => {
     formElement = await fixture(
-      html` <form>
+      html` <form @submit=${preventSubmit}>
         <uui-slider
           label="a slideruui-slider label"
           name="slider"
@@ -141,4 +147,16 @@ describe('UuiSlider in Form', () => {
     const formData = new FormData(formElement);
     await expect(formData.get('slider')).to.be.equal('90');
   });
+
+  describe('submit', () => {
+    it('should submit when pressing enter', async () => {
+      const listener = oneEvent(formElement, 'submit');
+      element.dispatchEvent(new KeyboardEvent('keypress', { key: 'Enter' }));
+
+      const event = await listener;
+      expect(event).to.exist;
+      expect(event.type).to.equal('submit');
+      expect(event!.target).to.equal(formElement);
+    });
+  });
 });