use debounce to fix loosing focus in EuiSuggest component

elastic · Jan 19, 2021 · de91710 · de91710
1 parent 8a00a61
commit de91710
Showing 1 changed file with 13 additions and 7 deletions.
diff --git a/src/plugins/vis_type_timeseries/public/application/components/index_pattern_suggest.tsx b/src/plugins/vis_type_timeseries/public/application/components/index_pattern_suggest.tsx
@@ -17,6 +17,8 @@
  * under the License.
  */
 import React, { useEffect, useState, useCallback } from 'react';
+import useDebounce from 'react-use/lib/useDebounce';
+
 import { EuiSuggest, EuiSuggestProps } from '@elastic/eui';
 import { getDataStart } from '../../services';
 import { INDEXES_SEPARATOR } from '../../../common/constants';
@@ -58,13 +60,17 @@ export const IndexPatternSuggest = ({
     fetchIndexes();
   }, []);
 
-  useEffect(() => {
-    if (inputValue !== value) {
-      onChange({
-        [indexPatternName]: inputValue,
-      });
-    }
-  }, [onChange, inputValue, indexPatternName, value]);
+  useDebounce(
+    () => {
+      if (inputValue !== value) {
+        onChange({
+          [indexPatternName]: inputValue,
+        });
+      }
+    },
+    300,
+    [onChange, inputValue, indexPatternName, value]
+  );
 
   const onItemClick: EuiSuggestProps['onItemClick'] = useCallback(
     ({ label }) => {