bug(@ionic/core): Implicit form submit doesn't work in Ionic 4

Fixes ionic-team#15682 Pressing enter key on input & textarea now submits the form Also fixed one build issue regarding a type error related to `SelectInputChangeEvent`
AhsanAyaz · Sep 20, 2018 · 0894e7e · 0894e7e
1 parent 389e9d1
commit 0894e7e
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 5 deletions.
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
@@ -3,6 +3,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Pr
 import { Color, Mode, StyleEvent, TextFieldTypes, TextInputChangeEvent } from '../../interface';
 import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
+import { submitFormOnEnterPress, KEY_CODES } from '../../utils/forms';
 
 @Component({
   tag: 'ion-input',
@@ -299,7 +300,7 @@ export class Input implements ComponentInterface {
   /**
    * Check if we need to clear the text input if clearOnEdit is enabled
    */
-  private onKeydown() {
+  private onKeydown(ev: KeyboardEvent) {
     if (this.clearOnEdit) {
       // Did the input value change after it was blurred and edited?
       if (this.didBlurAfterEdit && this.hasValue()) {
@@ -310,6 +311,10 @@ export class Input implements ComponentInterface {
       // Reset the flag
       this.didBlurAfterEdit = false;
     }
+    // submit the form if enter key is pressed
+    if (ev.keyCode === KEY_CODES.ENTER) {  // if there is an enter key press on the input
+      submitFormOnEnterPress(this.el, ev);
+    }
   }
 
   private clearTextInput() {

diff --git a/core/src/components/input/test/form-submit/index.html b/core/src/components/input/test/form-submit/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Input - Form Submit</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Input - Form Submit</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content id="content">
+      <form>
+        <ion-list>
+          <ion-item>
+            <ion-label color="primary">Input</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+          <div padding>
+            <ion-button expand="block" type="submit">Submit</ion-button>
+          </div>
+        </ion-list>
+      </form>
+    </ion-content>
+  </ion-app>
+</body>
+</html>
diff --git a/core/src/components/textarea/test/basic/index.html b/core/src/components/textarea/test/basic/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>Input - Textarea</title>
+  <title>Textarea - Basic</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
   <link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">

diff --git a/core/src/components/textarea/test/form-submit/index.html b/core/src/components/textarea/test/form-submit/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Textarea - Form Submit</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Textarea - Form Submit</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content id="content">
+      <form>
+        <ion-list>
+          <ion-item>
+            <ion-label color="primary">Textarea</ion-label>
+            <ion-textarea></ion-textarea>
+          </ion-item>
+          <div padding>
+            <ion-button expand="block" type="submit">Submit</ion-button>
+          </div>
+        </ion-list>
+      </form>
+    </ion-content>
+  </ion-app>
+</body>
+</html>
diff --git a/core/src/components/textarea/test/preview/index.html b/core/src/components/textarea/test/preview/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>Input - Textarea</title>
+  <title>Textarea - Preview</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
   <link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">

diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
@@ -3,6 +3,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Pr
 import { Color, Mode, StyleEvent, TextInputChangeEvent } from '../../interface';
 import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses } from '../../utils/theme';
+import { submitFormOnEnterPress, KEY_CODES } from '../../utils/forms';
 
 @Component({
   tag: 'ion-textarea',
@@ -206,8 +207,12 @@ export class Textarea implements ComponentInterface {
     this.ionBlur.emit();
   }
 
-  private onKeyDown() {
+  private onKeyDown(ev: KeyboardEvent) {
     this.checkClearOnEdit();
+    // submit the form if enter key is pressed
+    if (ev.keyCode === KEY_CODES.ENTER) {    // if there is an enter-key press on the textarea
+      submitFormOnEnterPress(this.el, ev);
+    }
   }
 
   /**

diff --git a/core/src/utils/forms.ts b/core/src/utils/forms.ts
@@ -0,0 +1,26 @@
+import { hasShadowDom } from './helpers';
+
+export const KEY_CODES = {
+  ENTER: 13
+};
+
+export function submitFormOnEnterPress(el: HTMLElement, ev: KeyboardEvent) {
+  const form = el.closest('form');
+  if (form) {
+    ev.stopPropagation();
+    const submitButton: HTMLElement | null = form.querySelector('[type="submit"]');
+    if (submitButton) {
+      if (hasShadowDom(submitButton)) {
+        const fakeButton = document.createElement('button');
+        fakeButton.type = 'submit';
+        fakeButton.style.display = 'none';
+        form.appendChild(fakeButton);
+        console.log(form);
+        fakeButton.click();
+        fakeButton.remove();
+      } else {
+        submitButton.click();
+      }
+    }
+  }
+}
diff --git a/core/src/utils/input-interface.ts b/core/src/utils/input-interface.ts
@@ -12,7 +12,7 @@ export interface InputChangeEvent {
 
 export interface SelectInputChangeEvent {
   value: any | any[] | undefined;
-  text: string;
+  text: string | undefined;
 }
 
 export interface StyleEvent {