diff --git a/changelogs/unreleased/37951-project-settings-required-approval-input-not-sequential-order.yml b/changelogs/unreleased/37951-project-settings-required-approval-input-not-sequential-order.yml
new file mode 100644
index 0000000000000000000000000000000000000000..909dd38bbeeed68ace6bc2de7ade3e4a8f1ed30c
--- /dev/null
+++ b/changelogs/unreleased/37951-project-settings-required-approval-input-not-sequential-order.yml
@@ -0,0 +1,5 @@
+---
+title: Fix project setting approval input in non-sequential order
+merge_request: 25391
+author:
+type: fixed
diff --git a/ee/app/assets/javascripts/approvals/components/mr_edit/rule_input.vue b/ee/app/assets/javascripts/approvals/components/mr_edit/rule_input.vue
index 911acc6f95a0f03a9a3cbc4f86465073422540b6..c8b1d0c23b2b1df637562b29067dedcb9e4a3c83 100644
--- a/ee/app/assets/javascripts/approvals/components/mr_edit/rule_input.vue
+++ b/ee/app/assets/javascripts/approvals/components/mr_edit/rule_input.vue
@@ -1,6 +1,7 @@
 <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>
diff --git a/ee/spec/frontend/approvals/components/mr_edit/rule_input_spec.js b/ee/spec/frontend/approvals/components/mr_edit/rule_input_spec.js
index af78a6fc10f344b92a18a919fb2ffe5924308fd8..dd0ebe3e6295751e90c73b57e407ab6f818a0810 100644
--- a/ee/spec/frontend/approvals/components/mr_edit/rule_input_spec.js
+++ b/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,
+      );
+    });
   });
 });