Fix project setting approval approval input in sequential order

- Debounce action call to not fire on every number change

changelogs/unreleased/37951-project-settings-required-approval-input-not-sequential-order.yml

+---
+title: Fix project setting approval input in non-sequential order
+merge_request: 25391
+author:
+type: fixed

ee/app/assets/javascripts/approvals/components/mr_edit/rule_input.vue

 <script>
 import { mapState, mapActions } from 'vuex';
 import { RULE_TYPE_ANY_APPROVER } from '../../constants';
+import { debounce } from 'lodash';
 
 const ANY_RULE_NAME = 'All Members';
 
@@ -21,17 +22,20 @@ export default {
   },
   methods: {
     ...mapActions(['putRule', 'postRule']),
-    onInputChange(event) {
+    onInputChange: debounce(function debounceSearch(event) {
+      const { value } = event.target;
+      const approvalsRequired = parseInt(value, 10);
+
       if (this.rule.id) {
-        this.putRule({ id: this.rule.id, approvalsRequired: Number(event.target.value) });
+        this.putRule({ id: this.rule.id, approvalsRequired });
       } else {
         this.postRule({
           name: ANY_RULE_NAME,
           ruleType: RULE_TYPE_ANY_APPROVER,
-          approvalsRequired: Number(event.target.value),
+          approvalsRequired,
         });
       }
-    },
+    }, 1000),
   },
 };
 </script>

ee/spec/frontend/approvals/components/mr_edit/rule_input_spec.js

@@ -4,6 +4,8 @@ import RuleInput from 'ee/approvals/components/mr_edit/rule_input.vue';
 import MREditModule from 'ee/approvals/stores/modules/mr_edit';
 import { createStoreOptions } from 'ee/approvals/stores';
 
+jest.mock('lodash/debounce', () => jest.fn(fn => fn));
+
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
@@ -80,10 +82,14 @@ describe('Rule Input', () => {
     wrapper.element.value = wrapper.props().rule.approvalsRequired + 1;
     wrapper.trigger('input');
 
-    expect(action).toHaveBeenCalledWith(
-      expect.anything(),
-      { approvalsRequired: 10, id: 5 },
-      undefined,
-    );
+    jest.runAllTimers();
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(action).toHaveBeenCalledWith(
+        expect.anything(),
+        { approvalsRequired: 10, id: 5 },
+        undefined,
+      );
+    });
   });
 });