fixes #25197 - onChange debounce too slow

(cherry picked from commit 882d451)
theforeman · Oct 25, 2018 · fac3d54 · fac3d54
1 parent a25699d
commit fac3d54
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 12 deletions.
diff --git a/webpack/assets/javascripts/react_app/components/AutoComplete/AutoCompleteActions.js b/webpack/assets/javascripts/react_app/components/AutoComplete/AutoCompleteActions.js
@@ -1,4 +1,5 @@
 import URI from 'urijs';
+import debounce from 'lodash/debounce';
 import API from '../../API';
 import { STATUS } from '../../constants';
 import { clearSpaces } from '../../common/helpers';
@@ -20,18 +21,36 @@ export const getResults = ({
     dispatch,
   });
 
-  return API.get(getAPIPath({ trigger, searchQuery, url }))
-    .then(({ data }) =>
-      requestSuccess({
-        data,
-        controller,
-        dispatch,
-        searchQuery,
-        trigger,
-      }))
-    .catch(error => requestFailure({ error, dispatch }));
+  const path = getAPIPath({ trigger, searchQuery, url });
+  return createAPIRequest({
+    controller,
+    path,
+    searchQuery,
+    trigger,
+    dispatch,
+  });
 };
 
+let createAPIRequest = ({
+  controller,
+  path,
+  searchQuery,
+  trigger,
+  dispatch,
+}) => API.get(path)
+  .then(({
+    data,
+  }) => requestSuccess({
+    data,
+    controller,
+    dispatch,
+    searchQuery,
+    trigger,
+  }))
+  .catch(error => requestFailure({ error, dispatch }));
+
+createAPIRequest = debounce(createAPIRequest, 250);
+
 const startRequest = ({
   controller, searchQuery, trigger, dispatch,
 }) => {

diff --git a/...ssets/javascripts/react_app/components/AutoComplete/__tests__/AutoCompleteActions.test.js b/...ssets/javascripts/react_app/components/AutoComplete/__tests__/AutoCompleteActions.test.js
@@ -10,6 +10,7 @@ import {
   url,
 } from '../AutoComplete.fixtures';
 
+jest.mock('lodash/debounce', () => jest.fn(fn => fn));
 jest.mock('../../../API');
 
 const loadResults = (requestParams, serverMock) => {

diff --git a/webpack/assets/javascripts/react_app/components/AutoComplete/index.js b/webpack/assets/javascripts/react_app/components/AutoComplete/index.js
@@ -26,9 +26,8 @@ class AutoComplete extends React.Component {
       'unableHTMLAutocomplete',
       'handleKeyDown',
     ]);
-    debounceMethods(this, 250, ['handleInputChange', 'handleLoading']);
-    debounceMethods(this, 125, ['handleInputFocus']);
     this._typeahead = React.createRef();
+    debounceMethods(this, 500, ['handleLoading']);
   }
 
   componentDidMount() {