[Lens] Workaround for EuiFieldNumber validity change causing annotati…

…on query update bug
elastic · Oct 31, 2023 · 0657a08 · 0657a08
1 parent f4c7ac4
commit 0657a08
Showing 1 changed file with 44 additions and 45 deletions.
diff --git a/packages/kbn-visualization-ui-components/components/line_style_settings.tsx b/packages/kbn-visualization-ui-components/components/line_style_settings.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useState } from 'react';
+import React, { useState, memo, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
   EuiButtonGroup,
@@ -44,9 +44,12 @@ export const LineStyleSettings = ({
           <EuiFlexItem>
             <LineThicknessSlider
               value={currentConfig?.lineWidth || 1}
-              onChange={(value) => {
+              // Without this memoization, EuiFieldNumber rerenders too often
+              // which somehow causes the annotation query to fall out of sync
+              onChange={useCallback((value) => {
                 setConfig({ lineWidth: value });
-              }}
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+              }, [])}
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
@@ -107,46 +110,42 @@ function getSafeValue(value: number | '', prevValue: number, min: number, max: n
   return Math.max(minRange, Math.min(value, maxRange));
 }
 
-const LineThicknessSlider = ({
-  value,
-  onChange,
-}: {
-  value: number;
-  onChange: (value: number) => void;
-}) => {
-  const [unsafeValue, setUnsafeValue] = useState<string>(String(value));
+const LineThicknessSlider = memo(
+  ({ value, onChange }: { value: number; onChange: (value: number) => void }) => {
+    const [unsafeValue, setUnsafeValue] = useState<string>(String(value));
 
-  return (
-    <EuiFieldNumber
-      data-test-subj="lnsXYThickness"
-      value={unsafeValue}
-      fullWidth
-      min={minRange}
-      max={maxRange}
-      step={1}
-      append="px"
-      compressed
-      onChange={({ currentTarget: { value: newValue } }) => {
-        setUnsafeValue(newValue);
-        const convertedValue = newValue === '' ? '' : Number(newValue);
-        const safeValue = getSafeValue(Number(newValue), Number(newValue), minRange, maxRange);
-        // only update onChange is the value is valid and in range
-        if (convertedValue === safeValue) {
-          onChange(safeValue);
-        }
-      }}
-      onBlur={() => {
-        if (unsafeValue !== String(value)) {
-          const safeValue = getSafeValue(
-            unsafeValue === '' ? unsafeValue : Number(unsafeValue),
-            value,
-            minRange,
-            maxRange
-          );
-          onChange(safeValue);
-          setUnsafeValue(String(safeValue));
-        }
-      }}
-    />
-  );
-};
+    return (
+      <EuiFieldNumber
+        data-test-subj="lnsXYThickness"
+        value={unsafeValue}
+        fullWidth
+        min={minRange}
+        max={maxRange}
+        step={1}
+        append="px"
+        compressed
+        onChange={({ currentTarget: { value: newValue } }) => {
+          setUnsafeValue(newValue);
+          const convertedValue = newValue === '' ? '' : Number(newValue);
+          const safeValue = getSafeValue(Number(newValue), Number(newValue), minRange, maxRange);
+          // only update onChange is the value is valid and in range
+          if (convertedValue === safeValue) {
+            onChange(safeValue);
+          }
+        }}
+        onBlur={() => {
+          if (unsafeValue !== String(value)) {
+            const safeValue = getSafeValue(
+              unsafeValue === '' ? unsafeValue : Number(unsafeValue),
+              value,
+              minRange,
+              maxRange
+            );
+            onChange(safeValue);
+            setUnsafeValue(String(safeValue));
+          }
+        }}
+      />
+    );
+  }
+);