useDebounce properly this time

elastic · Sep 10, 2020 · 2978769 · 2978769
1 parent e0058e2
commit 2978769
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 10 deletions.
diff --git a/...ens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx b/...ens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx
@@ -7,7 +7,7 @@
 import React, { MouseEventHandler } from 'react';
 import { shallow } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { EuiPopover } from '@elastic/eui';
+import { EuiPopover, EuiLink } from '@elastic/eui';
 import { createMockedIndexPattern } from '../../../mocks';
 import { FilterPopover, QueryInput, LabelInput } from './filter_popover';
 
@@ -24,10 +24,8 @@ const defaultProps = {
   },
   setFilter: jest.fn(),
   indexPattern: createMockedIndexPattern(),
-  Button: (onClick: MouseEventHandler) => (
-    <div onClick={onClick} onKeyPress={onClick}>
-      trigger
-    </div>
+  Button: ({ onClick }: { onClick: MouseEventHandler }) => (
+    <EuiLink onClick={onClick}>trigger</EuiLink>
   ),
   isOpenByCreation: true,
   setIsOpenByCreation: jest.fn(),

diff --git a/...ins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/...ins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -6,9 +6,9 @@
 import './filter_popover.scss';
 
 import React, { MouseEventHandler, useState } from 'react';
+import { useDebounce } from 'react-use';
 import { EuiPopover, EuiFieldText, EuiSpacer, keys } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { debounce } from 'lodash';
 import { FilterValue, defaultLabel, isQueryValid } from '.';
 import { IndexPattern } from '../../../types';
 import { QueryStringInput, Query } from '../../../../../../../../src/plugins/data/public';
@@ -107,11 +107,10 @@ export const QueryInput = ({
     setInputValue(value);
   }, [value, setInputValue]);
 
-  const onChangeDebounced = React.useMemo(() => debounce(onChange, 256), [onChange]);
+  useDebounce(() => onChange(inputValue), 256, [inputValue]);
 
   const handleInputChange = (input: Query) => {
     setInputValue(input);
-    onChangeDebounced(input);
   };
 
   return (
@@ -162,12 +161,11 @@ export const LabelInput = ({
     setInputValue(value);
   }, [value, setInputValue]);
 
-  const onChangeDebounced = React.useMemo(() => debounce(onChange, 256), [onChange]);
+  useDebounce(() => onChange(inputValue), 256, [inputValue]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const val = String(e.target.value);
     setInputValue(val);
-    onChangeDebounced(val);
   };
 
   return (