diff --git a/addon/components/form-for.js b/addon/components/form-for.js index 1872c3d5..4f9be94f 100644 --- a/addon/components/form-for.js +++ b/addon/components/form-for.js @@ -1,6 +1,6 @@ import Component from '@glimmer/component'; import { arg, func } from 'ember-arg-types'; -import { bool, string, object, boolean } from 'prop-types'; +import { bool, string, object, boolean, number } from 'prop-types'; import { next } from '@ember/runloop'; import { dasherize } from '@ember/string'; import { action, setProperties, notifyPropertyChange } from '@ember/object'; @@ -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; @@ -154,6 +155,19 @@ export default class FormForComponent extends Component { return this.useBemClassConfig || false; } + + /** + * How long in ms to debounce the form submit, useful for autoSubmit situations + * @property formActionDebounce + * @type number + * @default 200 + * @public + */ + @arg(number) + get formActionDebounce() { + return this.formFor.formActionDebounce ?? 0; + } + /** * A class which will be appended to the form for styling purposes using bem style * @property _bemClass @@ -207,6 +221,7 @@ export default class FormForComponent extends Component { : 'form-button'; } + // -------------------------------------------------------------------------------- // This section is where the DSL syntax lives @@ -798,7 +813,11 @@ export default class FormForComponent extends Component { * @method doSubmit * @public */ - async doSubmit() { + doSubmit() { + return debounce(this, '_doSubmit', this.formActionDebounce); + } + + async _doSubmit() { const lastDoSubmit = this.lastDoSubmit; const model = this.model; @@ -1191,6 +1210,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 index c255be9a..f7bfe388 100644 --- 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 index b7f69763..85792908 100644 --- a/config/environment.js +++ b/config/environment.js @@ -26,6 +26,7 @@ module.exports = function (/* environment, appConfig */) { controlsFolder: 'form-controls', controlPrefix: 'ff-', + formActionDebounce: 200, }, }, };