From d19792c3cfb0e53c540fbb95b3028a0725f11dce Mon Sep 17 00:00:00 2001
From: Travis Tidwell <travis@form.io>
Date: Mon, 8 Jul 2024 15:10:41 -0500
Subject: [PATCH] =?UTF-8?q?Fixing=20the=20submitOnEnter=20where=20it=20wil?=
 =?UTF-8?q?l=20show=20the=20loader=20for=20the=20submit=E2=80=A6=20(#5675)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fixing the submitOnEnter where it will show the loader for the submit button, as well as protect the event receiver.

* Find the component by action type.
---
 src/Webform.js                                |  6 +++--
 .../_classes/component/Component.js           |  4 +--
 src/components/_classes/input/Input.js        | 25 ++++++++++++++++++-
 src/components/form/Form.js                   |  2 +-
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/Webform.js b/src/Webform.js
index 742f2b5db4..6ac03b7d55 100644
--- a/src/Webform.js
+++ b/src/Webform.js
@@ -786,7 +786,7 @@ export default class Webform extends NestedDataComponent {
      * Sets the submission value
      * @param {object|null|undefined} submission - The submission to set.
      * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
-     * @return {void}
+     * @returns {void}
      */
     onSetSubmission(submission, flags = {}) {
       this.submissionSet = true;
@@ -998,7 +998,9 @@ export default class Webform extends NestedDataComponent {
             "submitButton",
             (options) => {
                 this.submit(false, options).catch((e) => {
-                    options.instance.loading = false;
+                    if (options?.instance) {
+                        options.instance.loading = false;
+                    }
                     return e !== false && e !== undefined && console.log(e);
                 });
             },
diff --git a/src/components/_classes/component/Component.js b/src/components/_classes/component/Component.js
index 0aeca4650a..af955a23a5 100644
--- a/src/components/_classes/component/Component.js
+++ b/src/components/_classes/component/Component.js
@@ -1196,7 +1196,7 @@ export default class Component extends Element {
   /**
    * Renders a modal preview template and returns the markup as a string
    * @param {object|null|undefined} ctx - The rendering context
-   * @return {string} - The modal preview markup
+   * @returns {string} - The modal preview markup
    */
   renderModalPreview(ctx) {
     return this.renderTemplate('modalPreview', ctx || {});
@@ -1272,7 +1272,7 @@ export default class Component extends Element {
    * Creates the tooltip instance using tippy.js and returns it
    * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
    * @param {object|null|undefined} settings - tippy.js options
-   * @return {import('tippy.js').Tippy} - tippy.js instance
+   * @returns {import('tippy.js').Tippy} - tippy.js instance
    */
   createTooltip(tooltipEl, settings = {}) {
     const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
diff --git a/src/components/_classes/input/Input.js b/src/components/_classes/input/Input.js
index ce7e9c7464..025b457da7 100644
--- a/src/components/_classes/input/Input.js
+++ b/src/components/_classes/input/Input.js
@@ -269,7 +269,30 @@ export default class Input extends Multivalue {
         if (key === 13) {
           event.preventDefault();
           event.stopPropagation();
-          this.emit('submitButton');
+          let submitButton = null;
+          if (this.root?.everyComponent) {
+            this.root.everyComponent((component) => {
+              if (
+                component?.component.type === 'button' &&
+                component?.component.action === 'submit'
+              ) {
+                submitButton = component;
+                return false;
+              }
+            });
+          }
+          const options = {};
+          if (submitButton) {
+            options.instance = submitButton;
+            options.component = submitButton.component;
+            options.noValidate = this.component.state === 'draft';
+            options.state = this.component.state || 'submitted';
+            submitButton.loading = true;
+            this.emit('submitButton', options);
+          }
+          else {
+            this.emit('submitButton', options);
+          }
         }
       });
     }
diff --git a/src/components/form/Form.js b/src/components/form/Form.js
index 7ec73f3a2b..f402414fb2 100644
--- a/src/components/form/Form.js
+++ b/src/components/form/Form.js
@@ -733,7 +733,7 @@ export default class FormComponent extends Component {
    * Sets the subform value
    * @param {object|null|undefined} submission - The submission to set.
    * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
-   * @return {void}
+   * @returns {void}
    */
   onSetSubFormValue(submission, flags) {
     this.subForm.setValue(submission, flags);