[EuiDualRange] Fix incorrect width calculations caused by race condition

cee-chen · cee-chen · commit 526d3c7f12dd · 2023-10-23T14:50:25.000-07:00
- this is the ultimate fix for the opened issue - the conversion to a function component apparently is causing race conditions for the `ref` behavior - wrapping the `.clientWidth` call in a rAF fixes the issue

+ bonus - DRY out `this.props.showInput === 'inputWithPopover'` logic with a getter
diff --git a/src/components/form/range/dual_range.test.tsx b/src/components/form/range/dual_range.test.tsx
@@ -191,6 +191,11 @@ describe('EuiDualRange', () => {
       });
 
       it('renders inputs with popover slider when showInput="inputWithPopover"', () => {
+        // Mock requestAnimationFrame to run immediately
+        jest
+          .spyOn(window, 'requestAnimationFrame')
+          .mockImplementation((cb: Function) => cb());
+
         render(
           <EuiDualRange
             {...props}
@@ -209,6 +214,8 @@ describe('EuiDualRange', () => {
         expect(screen.getByRole('dialog')).toBeDefined();
         expect(screen.getAllByRole('slider')).toHaveLength(2);
         expect(screen.getByTestSubject('test')).toBeInTheDocument();
+
+        jest.restoreAllMocks();
       });
     });
 
diff --git a/src/components/form/range/dual_range.tsx b/src/components/form/range/dual_range.tsx
@@ -65,14 +65,36 @@ export class EuiDualRangeClass extends Component<
     isVisible: true, // used to trigger a rerender if initial element width is 0
   };
 
+  get isInPopover() {
+    return this.props.showInput === 'inputWithPopover';
+  }
   preventPopoverClose = false;
+
   rangeSliderRef: HTMLInputElement | null = null;
   handleRangeSliderRefUpdate = (ref: HTMLInputElement | null) => {
     this.rangeSliderRef = ref;
-    this.setState({
-      rangeSliderRefAvailable: !!ref,
-      rangeWidth: !!ref ? ref.clientWidth : null,
-    });
+    if (ref) {
+      if (this.isInPopover) {
+        // Wait a tick for popover rendering to settle
+        requestAnimationFrame(() => {
+          this.setState({
+            rangeSliderRefAvailable: true,
+            rangeWidth: ref.clientWidth,
+          });
+        });
+      } else {
+        // If not in a popover, no need to wait
+        this.setState({
+          rangeSliderRefAvailable: true,
+          rangeWidth: ref.clientWidth,
+        });
+      }
+    } else {
+      this.setState({
+        rangeSliderRefAvailable: false,
+        rangeWidth: 0,
+      });
+    }
   };
   private leftPosition = 0;
   private dragAcc = 0;
@@ -319,9 +341,7 @@ export class EuiDualRangeClass extends Component<
 
   calculateThumbPositionStyle = (value: number, width?: number) => {
     const trackWidth =
-      this.props.showInput === 'inputWithPopover' && !!width
-        ? width
-        : this.rangeSliderRef!.clientWidth;
+      this.isInPopover && !!width ? width : this.state.rangeWidth;
 
     const position = calculateThumbPosition(
       value,
@@ -462,7 +482,7 @@ export class EuiDualRangeClass extends Component<
 
     const { id } = this.state;
 
-    const showInputOnly = showInput === 'inputWithPopover';
+    const showInputOnly = this.isInPopover;
     const canShowDropdown = showInputOnly && !readOnly && !disabled;
 
     const rangeStyles = euiRangeStyles(theme);
diff --git a/upcoming_changelogs/7305.md b/upcoming_changelogs/7305.md
@@ -1,3 +1,4 @@
 **Bug fixes**
 
 - Fixed `EuiInputPopover` not calling `onPanelResize` callback prop
+- Fixed `EuiDualRange` incorrectly positioning highlights when rendered with `showInput="inputWithPopover"`

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`Bug fixes`
`2`	`2`
`3`	`3`	- Fixed `EuiInputPopover` not calling `onPanelResize` callback prop
	`4`	+- Fixed `EuiDualRange` incorrectly positioning highlights when rendered with `showInput="inputWithPopover"`