From 29787699d4fbaee278046e31b68c8743cece02b2 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Thu, 10 Sep 2020 17:37:01 +0200
Subject: [PATCH] useDebounce properly this time

---
 .../definitions/filters/filter_popover.test.tsx           | 8 +++-----
 .../operations/definitions/filters/filter_popover.tsx     | 8 +++-----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx
index 76b4d186325bc..4d4b4018d75a7 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.test.tsx
+++ b/x-pack/plugins/lens/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/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
index fd98c0fc72c67..cdfa19f53a13a 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
+++ b/x-pack/plugins/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 (