fix: use event.currentTarget instead of event.target

elastic · Jul 24, 2023 · 43d487e · 43d487e
1 parent 8b4ca34
commit 43d487e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/src/components/datagrid/controls/display_selector.test.tsx b/src/components/datagrid/controls/display_selector.test.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { act } from 'react-dom/test-utils';
+import { act } from '@testing-library/react';
 import { shallow, mount, ShallowWrapper, ReactWrapper } from 'enzyme';
 import { testCustomHook } from '../../../test/internal';
 
@@ -310,10 +310,19 @@ describe('useDataGridDisplaySelector', () => {
           component
             .find('input[type="range"][data-test-subj="lineCountNumber"]')
             .prop('value');
-        const setLineCountNumber = (component: ReactWrapper, number: number) =>
-          component
-            .find('input[type="range"][data-test-subj="lineCountNumber"]')
-            .simulate('change', { target: { value: number } });
+        const setLineCountNumber = (
+          component: ReactWrapper,
+          number: number
+        ) => {
+          const input = component.find(
+            'input[type="range"][data-test-subj="lineCountNumber"]'
+          );
+
+          // enzyme simulate() doesn't handle event.currentTarget updates well
+          // https://github.com/enzymejs/enzyme/issues/218
+          (input.getDOMNode() as HTMLInputElement).value = number.toString();
+          input.simulate('change');
+        };
 
         it('conditionally displays a line count number input when the lineCount button is selected', () => {
           const component = mount(<MockComponent />);
@@ -357,7 +366,11 @@ describe('useDataGridDisplaySelector', () => {
           );
           openPopover(component);
 
-          setLineCountNumber(component, 3);
+          act(() => {
+            setLineCountNumber(component, 3);
+          });
+          component.update();
+
           expect(getLineCountNumber(component)).toEqual(3);
         });
 

diff --git a/src/components/datagrid/controls/display_selector.tsx b/src/components/datagrid/controls/display_selector.tsx
@@ -140,9 +140,9 @@ export const useDataGridDisplaySelector = (
   const setLineCountHeight = useCallback<
     NonNullable<EuiRangeProps['onChange']>
   >((event) => {
-    if (!event.target) return;
+    if (!event.currentTarget) return;
 
-    const newLineCount = Number((event.target as HTMLInputElement).value);
+    const newLineCount = Number(event.currentTarget.value);
     if (newLineCount < 1) return; // Don't let users set a 0 or negative line count
 
     setLineCount(newLineCount);