Debounce submission of the form

Foodee · Nov 3, 2022 · c9e1155 · c9e1155
1 parent e582d63
commit c9e1155
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/addon/components/form-for.js b/addon/components/form-for.js
@@ -9,6 +9,7 @@ import { A } from '@ember/array';
 import { inject as service } from '@ember/service';
 import { Promise } from 'rsvp';
 import { tracked } from '@glimmer/tracking';
+import { debounce } from '@ember/runloop';
 
 export default class FormForComponent extends Component {
   @service formFor;
@@ -798,7 +799,11 @@ export default class FormForComponent extends Component {
    * @method doSubmit
    * @public
    */
-  async doSubmit() {
+  doSubmit() {
+    return debounce(this, '_doSubmit', this.formFor.formActionDebounce ?? 0);
+  }
+
+  async _doSubmit() {
     const lastDoSubmit = this.lastDoSubmit;
 
     const model = this.model;
@@ -1191,6 +1196,7 @@ export default class FormForComponent extends Component {
   updateValues(keyValues) {
     return this.updateValuesFn(keyValues);
   }
+
   @action testClass(type) {
     return `${type}-button`;
   }

diff --git a/addon/services/form-for.js b/addon/services/form-for.js
@@ -30,6 +30,7 @@ export default class FormForService extends Service {
     this.customLabelComponent = this.config.customLabelComponent;
     this.customInfoTextComponent = this.config.customInfoTextComponent;
     this.preventsNavigationByDefault = this.config.preventsNavigationByDefault;
+    this.formActionDebounce = this.config.formActionDebounce;
 
     this.router.on('routeWillChange', (transition) => {
       if (

diff --git a/config/environment.js b/config/environment.js
@@ -26,6 +26,7 @@ module.exports = function (/* environment, appConfig */) {
 
         controlsFolder: 'form-controls',
         controlPrefix: 'ff-',
+        formActionDebounce: 200,
       },
     },
   };