From 20a0213eccab01183a4e15642eb26ac644ba13d5 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 23 Oct 2023 12:18:50 -0700
Subject: [PATCH 1/6] [EuiInputPopover] Fix missing `onPanelResize` callback

---
 src/components/popover/input_popover.spec.tsx | 11 +++++++++++
 src/components/popover/input_popover.tsx      |  5 +++++
 upcoming_changelogs/7305.md                   |  3 +++
 3 files changed, 19 insertions(+)
 create mode 100644 upcoming_changelogs/7305.md

diff --git a/src/components/popover/input_popover.spec.tsx b/src/components/popover/input_popover.spec.tsx
index 2e00958b3fa..e3ce9327c01 100644
--- a/src/components/popover/input_popover.spec.tsx
+++ b/src/components/popover/input_popover.spec.tsx
@@ -119,6 +119,17 @@ describe('EuiPopover', () => {
         .should('have.css', 'inline-size', '250px')
         .should('have.css', 'left', '50px');
     });
+
+    it('calls `onPanelResize`', () => {
+      const onPanelResize = cy.stub().as('onPanelResize');
+      cy.realMount(
+        <EuiInputPopover {...resizeProps} onPanelResize={onPanelResize} />
+      );
+      cy.get('@onPanelResize').should('have.been.calledWith', 250);
+
+      resizeInput(200);
+      cy.get('@onPanelResize').should('have.been.calledWith', 200);
+    });
   });
 
   describe('focus/tab management', () => {
diff --git a/src/components/popover/input_popover.tsx b/src/components/popover/input_popover.tsx
index 1089f289928..1fa0485a775 100644
--- a/src/components/popover/input_popover.tsx
+++ b/src/components/popover/input_popover.tsx
@@ -108,6 +108,11 @@ export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps> = ({
     return inputWidth < panelMinWidth ? panelMinWidth : inputWidth;
   }, [panelMinWidth, inputWidth]);
 
+  // Resize callback
+  useEffect(() => {
+    onPanelResize?.(panelWidth);
+  }, [panelWidth, onPanelResize]);
+
   useEffect(() => {
     if (panelEl) {
       // We have to modify the popover panel DOM node directly instead of using
diff --git a/upcoming_changelogs/7305.md b/upcoming_changelogs/7305.md
new file mode 100644
index 00000000000..c0124072fd1
--- /dev/null
+++ b/upcoming_changelogs/7305.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiInputPopover` not calling `onPanelResize` callback prop

From 9c7411c8529a97db6169c496f0119fa3efd443fd Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 23 Oct 2023 13:27:48 -0700
Subject: [PATCH 2/6] [misc] Type fixes/cleanup

- optional / not related to main fix
---
 src/components/form/range/dual_range.tsx | 10 +++++-----
 src/components/form/range/utils.ts       |  3 +--
 src/components/popover/input_popover.tsx |  2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/form/range/dual_range.tsx b/src/components/form/range/dual_range.tsx
index 07614a4c23e..90c2120dec2 100644
--- a/src/components/form/range/dual_range.tsx
+++ b/src/components/form/range/dual_range.tsx
@@ -280,7 +280,7 @@ export class EuiDualRangeClass extends Component<
         }
         lower = this._handleKeyDown(lower, event);
     }
-    if (lower >= this.upperValue || lower < this.props.min) return;
+    if (lower >= Number(this.upperValue) || lower < this.props.min) return;
     this._handleOnChange(lower, this.upperValue, event);
   };
 
@@ -298,7 +298,7 @@ export class EuiDualRangeClass extends Component<
         }
         upper = this._handleKeyDown(upper, event);
     }
-    if (upper <= this.lowerValue || upper > this.props.max) return;
+    if (upper <= Number(this.lowerValue) || upper > this.props.max) return;
     this._handleOnChange(this.lowerValue, upper, event);
   };
 
@@ -312,8 +312,8 @@ export class EuiDualRangeClass extends Component<
         lower = this._handleKeyDown(lower, event);
         upper = this._handleKeyDown(upper, event);
     }
-    if (lower >= this.upperValue || lower < this.props.min) return;
-    if (upper <= this.lowerValue || upper > this.props.max) return;
+    if (lower >= Number(this.upperValue) || lower < this.props.min) return;
+    if (upper <= Number(this.lowerValue) || upper > this.props.max) return;
     this._handleOnChange(lower, upper, event);
   };
 
@@ -377,7 +377,7 @@ export class EuiDualRangeClass extends Component<
     });
   };
 
-  onResize = (width?: number) => {
+  onResize = (width: number) => {
     this.setState({
       rangeWidth: width,
     });
diff --git a/src/components/form/range/utils.ts b/src/components/form/range/utils.ts
index 7c902151960..46bac7b63ed 100644
--- a/src/components/form/range/utils.ts
+++ b/src/components/form/range/utils.ts
@@ -12,7 +12,7 @@ export const calculateThumbPosition = (
   value: number,
   min: number,
   max: number,
-  width: number,
+  trackWidth: number,
   thumbSize: number = EUI_THUMB_SIZE
 ) => {
   // Calculate the left position based on value
@@ -21,7 +21,6 @@ export const calculateThumbPosition = (
   let valuePosition = decimal <= 1 ? decimal : 1;
   valuePosition = valuePosition >= 0 ? valuePosition : 0;
 
-  const trackWidth = width ?? 0;
   const thumbToTrackRatio = thumbSize / trackWidth;
   const trackPositionScale = (1 - thumbToTrackRatio) * 100;
 
diff --git a/src/components/popover/input_popover.tsx b/src/components/popover/input_popover.tsx
index 1fa0485a775..efad183795b 100644
--- a/src/components/popover/input_popover.tsx
+++ b/src/components/popover/input_popover.tsx
@@ -44,7 +44,7 @@ export interface _EuiInputPopoverProps
   fullWidth?: boolean;
   input: EuiPopoverProps['button'];
   inputRef?: EuiPopoverProps['buttonRef'];
-  onPanelResize?: (width?: number) => void;
+  onPanelResize?: (width: number) => void;
   /**
    * By default, **EuiInputPopovers** inherit the same width as the passed input element.
    * However, if the input width is too small, you can pass a minimum panel width

From 399a9a161f42d38e630c3c72f434e351ad28c761 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 23 Oct 2023 14:23:16 -0700
Subject: [PATCH 3/6] [EuiRangeTrack][setup] Remove `trackWidth` ref

- in favor of tracking width state from parent component and passing it down as a prop

- makes tests easier to mock as well
---
 .../__snapshots__/range_track.test.tsx.snap   | 22 +++----
 .../form/range/range_track.test.tsx           | 62 ++++++++-----------
 src/components/form/range/range_track.tsx     | 15 +----
 3 files changed, 41 insertions(+), 58 deletions(-)

diff --git a/src/components/form/range/__snapshots__/range_track.test.tsx.snap b/src/components/form/range/__snapshots__/range_track.test.tsx.snap
index 365d43e23fa..63d64482a0d 100644
--- a/src/components/form/range/__snapshots__/range_track.test.tsx.snap
+++ b/src/components/form/range/__snapshots__/range_track.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`EuiRangeTrack is rendered 1`] = `
   >
     <button
       class="euiRangeTick emotion-euiRangeTick-hasPseudoTickMark-regular"
-      style="inset-inline-start: calc(NaN% + 8px); max-inline-size: 9.090909090909092%;"
+      style="inset-inline-start: calc(0% + 8px); max-inline-size: 9.090909090909092%;"
       tabindex="-1"
       title="0"
       type="button"
@@ -21,7 +21,7 @@ exports[`EuiRangeTrack is rendered 1`] = `
     </button>
     <button
       class="euiRangeTick emotion-euiRangeTick-selected-hasPseudoTickMark-regular"
-      style="inset-inline-start: calc(-Infinity% + 8px); max-inline-size: 9.090909090909092%;"
+      style="inset-inline-start: calc(9.600000000000001% + 8px); max-inline-size: 9.090909090909092%;"
       tabindex="-1"
       title="10"
       type="button"
@@ -31,7 +31,7 @@ exports[`EuiRangeTrack is rendered 1`] = `
     </button>
     <button
       class="euiRangeTick emotion-euiRangeTick-hasPseudoTickMark-regular"
-      style="inset-inline-start: calc(-Infinity% + 8px); max-inline-size: 9.090909090909092%;"
+      style="inset-inline-start: calc(19.200000000000003% + 8px); max-inline-size: 9.090909090909092%;"
       tabindex="-1"
       title="20"
       type="button"
@@ -41,7 +41,7 @@ exports[`EuiRangeTrack is rendered 1`] = `
     </button>
     <button
       class="euiRangeTick emotion-euiRangeTick-hasPseudoTickMark-regular"
-      style="inset-inline-start: calc(-Infinity% + 8px); max-inline-size: 9.090909090909092%;"
+      style="inset-inline-start: calc(28.799999999999997% + 8px); max-inline-size: 9.090909090909092%;"
       tabindex="-1"
       title="30"
       type="button"
@@ -51,7 +51,7 @@ exports[`EuiRangeTrack is rendered 1`] = `
     </button>
     <button
       class="euiRangeTick emotion-euiRangeTick-hasPseudoTickMark-regular"
-      style="inset-inline-start: calc(-Infinity% + 8px); max-inline-size: 9.090909090909092%;"
+      style="inset-inline-start: calc(38.400000000000006% + 8px); max-inline-size: 9.090909090909092%;"
       tabindex="-1"
       title="40"
       type="button"
@@ -61,7 +61,7 @@ exports[`EuiRangeTrack is rendered 1`] = `
     </button>
     <button
       class="euiRangeTick emotion-euiRangeTick-hasPseudoTickMark-regular"
-      style="inset-inline-start: calc(-Infinity% + 8px); max-inline-size: 9.090909090909092%;"
+      style="inset-inline-start: calc(48% + 8px); max-inline-size: 9.090909090909092%;"
       tabindex="-1"
       title="50"
       type="button"
@@ -71,7 +71,7 @@ exports[`EuiRangeTrack is rendered 1`] = `
     </button>
     <button
       class="euiRangeTick emotion-euiRangeTick-hasPseudoTickMark-regular"
-      style="inset-inline-start: calc(-Infinity% + 8px); max-inline-size: 9.090909090909092%;"
+      style="inset-inline-start: calc(57.599999999999994% + 8px); max-inline-size: 9.090909090909092%;"
       tabindex="-1"
       title="60"
       type="button"
@@ -81,7 +81,7 @@ exports[`EuiRangeTrack is rendered 1`] = `
     </button>
     <button
       class="euiRangeTick emotion-euiRangeTick-hasPseudoTickMark-regular"
-      style="inset-inline-start: calc(-Infinity% + 8px); max-inline-size: 9.090909090909092%;"
+      style="inset-inline-start: calc(67.19999999999999% + 8px); max-inline-size: 9.090909090909092%;"
       tabindex="-1"
       title="70"
       type="button"
@@ -91,7 +91,7 @@ exports[`EuiRangeTrack is rendered 1`] = `
     </button>
     <button
       class="euiRangeTick emotion-euiRangeTick-hasPseudoTickMark-regular"
-      style="inset-inline-start: calc(-Infinity% + 8px); max-inline-size: 9.090909090909092%;"
+      style="inset-inline-start: calc(76.80000000000001% + 8px); max-inline-size: 9.090909090909092%;"
       tabindex="-1"
       title="80"
       type="button"
@@ -101,7 +101,7 @@ exports[`EuiRangeTrack is rendered 1`] = `
     </button>
     <button
       class="euiRangeTick emotion-euiRangeTick-hasPseudoTickMark-regular"
-      style="inset-inline-start: calc(-Infinity% + 8px); max-inline-size: 9.090909090909092%;"
+      style="inset-inline-start: calc(86.4% + 8px); max-inline-size: 9.090909090909092%;"
       tabindex="-1"
       title="90"
       type="button"
@@ -111,7 +111,7 @@ exports[`EuiRangeTrack is rendered 1`] = `
     </button>
     <button
       class="euiRangeTick emotion-euiRangeTick-hasPseudoTickMark-regular"
-      style="inset-inline-start: calc(-Infinity% + 8px); max-inline-size: 9.090909090909092%;"
+      style="inset-inline-start: calc(96% + 8px); max-inline-size: 9.090909090909092%;"
       tabindex="-1"
       title="100"
       type="button"
diff --git a/src/components/form/range/range_track.test.tsx b/src/components/form/range/range_track.test.tsx
index 88e6f3a168c..0247302db9e 100644
--- a/src/components/form/range/range_track.test.tsx
+++ b/src/components/form/range/range_track.test.tsx
@@ -14,27 +14,21 @@ import { shouldRenderCustomStyles } from '../../../test/internal';
 import { EuiRangeTrack } from './range_track';
 
 describe('EuiRangeTrack', () => {
-  shouldRenderCustomStyles(
-    <EuiRangeTrack
-      min={0}
-      max={100}
-      step={10}
-      showTicks
-      value="10"
-      onChange={() => {}}
-      {...requiredProps}
-    />
-  );
+  const props = {
+    trackWidth: 400,
+    min: 0,
+    max: 100,
+  };
+
+  shouldRenderCustomStyles(<EuiRangeTrack {...props} />);
 
   test('is rendered', () => {
     const { container } = render(
       <EuiRangeTrack
-        min={0}
-        max={100}
+        {...props}
         step={10}
         showTicks
         value="10"
-        onChange={() => {}}
         {...requiredProps}
       />
     );
@@ -56,7 +50,7 @@ describe('EuiRangeTrack', () => {
 
     test('should throw error if `max` does not line up with `step` interval', () => {
       const component = () =>
-        render(<EuiRangeTrack min={0} max={105} step={10} />);
+        render(<EuiRangeTrack {...props} max={105} step={10} />);
 
       expect(component).toThrowErrorMatchingSnapshot();
     });
@@ -64,13 +58,7 @@ describe('EuiRangeTrack', () => {
     test('should throw error if `tickInterval` is off sequence from `step`', () => {
       const component = () =>
         render(
-          <EuiRangeTrack
-            min={0}
-            max={100}
-            step={10}
-            showTicks
-            tickInterval={3}
-          />
+          <EuiRangeTrack {...props} step={10} showTicks tickInterval={3} />
         );
 
       expect(component).toThrowErrorMatchingSnapshot();
@@ -80,8 +68,8 @@ describe('EuiRangeTrack', () => {
       const component = () =>
         render(
           <EuiRangeTrack
+            {...props}
             min={0}
-            max={100}
             showTicks
             ticks={[{ label: '-100', value: -100 }]}
           />
@@ -94,7 +82,7 @@ describe('EuiRangeTrack', () => {
       const component = () =>
         render(
           <EuiRangeTrack
-            min={0}
+            {...props}
             max={100}
             showTicks
             ticks={[{ label: '200', value: 200 }]}
@@ -108,8 +96,7 @@ describe('EuiRangeTrack', () => {
       const component = () =>
         render(
           <EuiRangeTrack
-            min={0}
-            max={100}
+            {...props}
             step={50}
             showTicks
             ticks={[{ label: '10', value: 10 }]}
@@ -123,22 +110,22 @@ describe('EuiRangeTrack', () => {
       let consoleWarn: jest.SpyInstance;
 
       beforeAll(() => {
-        Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
-          configurable: true,
-          value: 100,
-        });
         consoleWarn = jest.spyOn(console, 'warn').mockImplementation(() => {});
       });
 
       afterAll(() => {
-        Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
-          value: 0,
-        });
         consoleWarn.mockRestore();
       });
 
       test('should warn if each tick has under 20px of width', () => {
-        render(<EuiRangeTrack min={0} max={100} tickInterval={10} showTicks />);
+        render(
+          <EuiRangeTrack
+            {...props}
+            trackWidth={100}
+            tickInterval={10}
+            showTicks
+          />
+        );
 
         expect(consoleWarn).toHaveBeenCalledWith(
           expect.stringContaining(
@@ -150,7 +137,12 @@ describe('EuiRangeTrack', () => {
       test('should throw an error if each tick has under 5px of width', () => {
         const component = () =>
           render(
-            <EuiRangeTrack min={0} max={100} tickInterval={2} showTicks />
+            <EuiRangeTrack
+              {...props}
+              trackWidth={100}
+              tickInterval={2}
+              showTicks
+            />
           );
 
         expect(component).toThrow(
diff --git a/src/components/form/range/range_track.tsx b/src/components/form/range/range_track.tsx
index 09d1268e71b..0bb5d32194d 100644
--- a/src/components/form/range/range_track.tsx
+++ b/src/components/form/range/range_track.tsx
@@ -8,12 +8,10 @@
 
 import React, {
   FunctionComponent,
-  useState,
   useMemo,
   useEffect,
   MouseEventHandler,
   HTMLAttributes,
-  ReactNode,
 } from 'react';
 import classNames from 'classnames';
 
@@ -38,12 +36,14 @@ export interface EuiRangeTrackProps
     _SharedRangeDataStructures,
     Pick<_SharedRangeVisualConfiguration, 'showTicks' | 'showRange'>,
     Pick<_SharedRangeInputProps, 'compressed' | 'disabled'> {
+  trackWidth: number;
   onChange?: MouseEventHandler<HTMLButtonElement>;
   children?: ReactNode | ((trackWidth: number) => React.ReactNode);
 }
 
 export const EuiRangeTrack: FunctionComponent<EuiRangeTrackProps> = ({
   children,
+  trackWidth,
   disabled,
   max,
   min,
@@ -63,8 +63,6 @@ export const EuiRangeTrack: FunctionComponent<EuiRangeTrackProps> = ({
     validateValueIsInStep(max, { min, max, step });
   }, [value, min, max, step]);
 
-  const [trackWidth, setTrackWidth] = useState(0);
-
   const tickSequence: number[] | undefined = useMemo(() => {
     if (showTicks !== true) return;
 
@@ -113,14 +111,7 @@ export const EuiRangeTrack: FunctionComponent<EuiRangeTrackProps> = ({
   const classes = classNames('euiRangeTrack', className);
 
   return (
-    <div
-      className={classes}
-      css={cssStyles}
-      {...rest}
-      ref={(node: HTMLDivElement | null) => {
-        setTrackWidth(node?.clientWidth ?? 0);
-      }}
-    >
+    <div className={classes} css={cssStyles} {...rest}>
       {levels && !!levels.length && (
         <EuiRangeLevels
           levels={levels}

From 3f09ca1475c15f174731ca40e31281e736dc5a4d Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 23 Oct 2023 14:25:25 -0700
Subject: [PATCH 4/6] [EuiRangeTrack] Remove children render prop

- `EuiDualRange` was already tracking a width state via the input ref, so all we need to do is pass it down to `EuiRangeTrack`
- `EuiRange` needs to be updated to add a new state
---
 src/components/form/range/dual_range.tsx  | 185 +++++++++++-----------
 src/components/form/range/range.tsx       |  99 ++++++------
 src/components/form/range/range_track.tsx |   5 +-
 3 files changed, 143 insertions(+), 146 deletions(-)

diff --git a/src/components/form/range/dual_range.tsx b/src/components/form/range/dual_range.tsx
index 90c2120dec2..a8abafcdaa6 100644
--- a/src/components/form/range/dual_range.tsx
+++ b/src/components/form/range/dual_range.tsx
@@ -61,7 +61,7 @@ export class EuiDualRangeClass extends Component<
     id: this.props.id || htmlIdGenerator()(),
     rangeSliderRefAvailable: false,
     isPopoverOpen: false,
-    rangeWidth: undefined,
+    rangeWidth: 0,
     isVisible: true, // used to trigger a rerender if initial element width is 0
   };
 
@@ -94,7 +94,7 @@ export class EuiDualRangeClass extends Component<
   }
 
   componentDidMount() {
-    if (this.rangeSliderRef && this.rangeSliderRef.clientWidth === 0) {
+    if (this.rangeSliderRef?.clientWidth === 0) {
       this.setState({ isVisible: false });
     }
   }
@@ -649,6 +649,7 @@ export class EuiDualRangeClass extends Component<
           </EuiRangeLabel>
         )}
         <EuiRangeTrack
+          trackWidth={this.state.rangeWidth}
           compressed={compressed}
           disabled={disabled}
           max={max}
@@ -663,107 +664,101 @@ export class EuiDualRangeClass extends Component<
           aria-hidden={showInput === true}
           showRange={showRange}
         >
-          {(trackWidth) => (
+          <EuiRangeSlider
+            className="euiDualRange__slider"
+            css={dualRangeStyles.euiDualRange__slider}
+            ref={this.handleRangeSliderRefUpdate}
+            id={id}
+            name={name}
+            min={min}
+            max={max}
+            step={step}
+            disabled={disabled}
+            onChange={this.handleSliderChange}
+            showTicks={showTicks}
+            aria-hidden={true}
+            tabIndex={-1}
+            showRange={showRange}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            {...rest}
+          />
+
+          {this.state.rangeSliderRefAvailable && (
             <>
-              <EuiRangeSlider
-                className="euiDualRange__slider"
-                css={dualRangeStyles.euiDualRange__slider}
-                ref={this.handleRangeSliderRefUpdate}
-                id={id}
-                name={name}
+              {isDraggable && this.isValid && (
+                <EuiRangeDraggable
+                  min={min}
+                  max={max}
+                  value={[this.lowerValue, this.upperValue]}
+                  disabled={disabled}
+                  lowerPosition={leftThumbPosition.left}
+                  upperPosition={rightThumbPosition.left}
+                  showTicks={showTicks}
+                  onChange={this.handleDrag}
+                  onFocus={this.onThumbFocus}
+                  onBlur={this.onThumbBlur}
+                  onKeyDown={this.handleDraggableKeyDown}
+                  aria-describedby={
+                    showInputOnly ? undefined : this.props['aria-describedby']
+                  }
+                  aria-label={
+                    showInputOnly ? undefined : this.props['aria-label']
+                  }
+                />
+              )}
+
+              <EuiRangeThumb
                 min={min}
-                max={max}
-                step={step}
+                max={Number(this.upperValue)}
+                value={this.lowerValue}
                 disabled={disabled}
-                onChange={this.handleSliderChange}
                 showTicks={showTicks}
-                aria-hidden={true}
-                tabIndex={-1}
-                showRange={showRange}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                {...rest}
+                showInput={!!showInput}
+                onKeyDown={this.handleLowerKeyDown}
+                onFocus={this.onThumbFocus}
+                onBlur={this.onThumbBlur}
+                style={logicalStyles(leftThumbStyles)}
+                aria-describedby={
+                  showInputOnly ? undefined : this.props['aria-describedby']
+                }
+                aria-label={
+                  showInputOnly ? undefined : this.props['aria-label']
+                }
               />
 
-              {this.state.rangeSliderRefAvailable && (
-                <React.Fragment>
-                  {isDraggable && this.isValid && (
-                    <EuiRangeDraggable
-                      min={min}
-                      max={max}
-                      value={[this.lowerValue, this.upperValue]}
-                      disabled={disabled}
-                      lowerPosition={leftThumbPosition.left}
-                      upperPosition={rightThumbPosition.left}
-                      showTicks={showTicks}
-                      onChange={this.handleDrag}
-                      onFocus={this.onThumbFocus}
-                      onBlur={this.onThumbBlur}
-                      onKeyDown={this.handleDraggableKeyDown}
-                      aria-describedby={
-                        showInputOnly
-                          ? undefined
-                          : this.props['aria-describedby']
-                      }
-                      aria-label={
-                        showInputOnly ? undefined : this.props['aria-label']
-                      }
-                    />
-                  )}
-
-                  <EuiRangeThumb
-                    min={min}
-                    max={Number(this.upperValue)}
-                    value={this.lowerValue}
-                    disabled={disabled}
-                    showTicks={showTicks}
-                    showInput={!!showInput}
-                    onKeyDown={this.handleLowerKeyDown}
-                    onFocus={this.onThumbFocus}
-                    onBlur={this.onThumbBlur}
-                    style={logicalStyles(leftThumbStyles)}
-                    aria-describedby={
-                      showInputOnly ? undefined : this.props['aria-describedby']
-                    }
-                    aria-label={
-                      showInputOnly ? undefined : this.props['aria-label']
-                    }
-                  />
-
-                  <EuiRangeThumb
-                    min={Number(this.lowerValue)}
-                    max={max}
-                    value={this.upperValue}
-                    disabled={disabled}
-                    showTicks={showTicks}
-                    showInput={!!showInput}
-                    onKeyDown={this.handleUpperKeyDown}
-                    onFocus={this.onThumbFocus}
-                    onBlur={this.onThumbBlur}
-                    style={logicalStyles(rightThumbStyles)}
-                    aria-describedby={
-                      showInputOnly ? undefined : this.props['aria-describedby']
-                    }
-                    aria-label={
-                      showInputOnly ? undefined : this.props['aria-label']
-                    }
-                  />
-                </React.Fragment>
-              )}
-
-              {showRange && this.isValid && (
-                <EuiRangeHighlight
-                  showTicks={showTicks}
-                  min={Number(min)}
-                  max={Number(max)}
-                  lowerValue={Number(this.lowerValue)}
-                  upperValue={Number(this.upperValue)}
-                  levels={levels}
-                  trackWidth={trackWidth}
-                />
-              )}
+              <EuiRangeThumb
+                min={Number(this.lowerValue)}
+                max={max}
+                value={this.upperValue}
+                disabled={disabled}
+                showTicks={showTicks}
+                showInput={!!showInput}
+                onKeyDown={this.handleUpperKeyDown}
+                onFocus={this.onThumbFocus}
+                onBlur={this.onThumbBlur}
+                style={logicalStyles(rightThumbStyles)}
+                aria-describedby={
+                  showInputOnly ? undefined : this.props['aria-describedby']
+                }
+                aria-label={
+                  showInputOnly ? undefined : this.props['aria-label']
+                }
+              />
             </>
           )}
+
+          {showRange && this.isValid && (
+            <EuiRangeHighlight
+              showTicks={showTicks}
+              min={Number(min)}
+              max={Number(max)}
+              lowerValue={Number(this.lowerValue)}
+              upperValue={Number(this.upperValue)}
+              levels={levels}
+              trackWidth={this.state.rangeWidth}
+            />
+          )}
         </EuiRangeTrack>
         {showLabels && <EuiRangeLabel disabled={disabled}>{max}</EuiRangeLabel>}
         {showInput && !showInputOnly && (
diff --git a/src/components/form/range/range.tsx b/src/components/form/range/range.tsx
index 80f6a382276..da6e13fcf42 100644
--- a/src/components/form/range/range.tsx
+++ b/src/components/form/range/range.tsx
@@ -56,6 +56,7 @@ export class EuiRangeClass extends Component<
   state = {
     id: this.props.id || htmlIdGenerator()(),
     isPopoverOpen: false,
+    trackWidth: 0,
   };
 
   handleOnChange = (
@@ -79,6 +80,10 @@ export class EuiRangeClass extends Component<
     );
   }
 
+  rangeSliderRef = (ref: HTMLInputElement | null) => {
+    this.setState({ trackWidth: ref?.clientWidth || 0 });
+  };
+
   onInputFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     if (this.props.onFocus) {
       this.props.onFocus(e);
@@ -199,6 +204,7 @@ export class EuiRangeClass extends Component<
           </EuiRangeLabel>
         )}
         <EuiRangeTrack
+          trackWidth={this.state.trackWidth}
           disabled={disabled}
           compressed={compressed}
           max={max}
@@ -213,56 +219,53 @@ export class EuiRangeClass extends Component<
           aria-hidden={!!showInput}
           showRange={showRange}
         >
-          {(trackWidth) => (
-            <>
-              <EuiRangeSlider
-                id={showInput ? undefined : id} // Attach id only to the input if there is one
-                name={name}
-                min={min}
-                max={max}
-                step={step}
-                value={value}
-                disabled={disabled}
-                onChange={this.handleOnChange}
-                showTicks={showTicks}
-                showRange={showRange}
-                tabIndex={showInput ? -1 : tabIndex}
-                onMouseDown={
-                  showInputOnly
-                    ? () => (this.preventPopoverClose = true)
-                    : undefined
-                }
-                onFocus={showInput === true ? undefined : onFocus}
-                onBlur={showInputOnly ? this.onInputBlur : onBlur}
-                aria-hidden={!!showInput}
-                thumbColor={thumbColor}
-                {...rest}
-              />
+          <EuiRangeSlider
+            id={showInput ? undefined : id} // Attach id only to the input if there is one
+            name={name}
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            disabled={disabled}
+            onChange={this.handleOnChange}
+            showTicks={showTicks}
+            showRange={showRange}
+            tabIndex={showInput ? -1 : tabIndex}
+            onMouseDown={
+              showInputOnly
+                ? () => (this.preventPopoverClose = true)
+                : undefined
+            }
+            onFocus={showInput === true ? undefined : onFocus}
+            onBlur={showInputOnly ? this.onInputBlur : onBlur}
+            aria-hidden={!!showInput}
+            thumbColor={thumbColor}
+            {...rest}
+            ref={this.rangeSliderRef}
+          />
 
-              {showRange && this.isValid && (
-                <EuiRangeHighlight
-                  showTicks={showTicks}
-                  min={Number(min)}
-                  max={Number(max)}
-                  lowerValue={Number(min)}
-                  upperValue={Number(value)}
-                  levels={levels}
-                  trackWidth={trackWidth}
-                />
-              )}
+          {showRange && this.isValid && (
+            <EuiRangeHighlight
+              showTicks={showTicks}
+              min={Number(min)}
+              max={Number(max)}
+              lowerValue={Number(min)}
+              upperValue={Number(value)}
+              levels={levels}
+              trackWidth={this.state.trackWidth}
+            />
+          )}
 
-              {showValue && !!String(value).length && (
-                <EuiRangeTooltip
-                  value={value}
-                  max={max}
-                  min={min}
-                  name={name}
-                  showTicks={showTicks}
-                  valuePrepend={valuePrepend}
-                  valueAppend={valueAppend}
-                />
-              )}
-            </>
+          {showValue && !!String(value).length && (
+            <EuiRangeTooltip
+              value={value}
+              max={max}
+              min={min}
+              name={name}
+              showTicks={showTicks}
+              valuePrepend={valuePrepend}
+              valueAppend={valueAppend}
+            />
           )}
         </EuiRangeTrack>
         {showLabels && (
diff --git a/src/components/form/range/range_track.tsx b/src/components/form/range/range_track.tsx
index 0bb5d32194d..5a9968d04af 100644
--- a/src/components/form/range/range_track.tsx
+++ b/src/components/form/range/range_track.tsx
@@ -31,14 +31,13 @@ import type {
 import { euiRangeTrackStyles } from './range_track.styles';
 
 export interface EuiRangeTrackProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'>,
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>,
     _SharedRangesValues,
     _SharedRangeDataStructures,
     Pick<_SharedRangeVisualConfiguration, 'showTicks' | 'showRange'>,
     Pick<_SharedRangeInputProps, 'compressed' | 'disabled'> {
   trackWidth: number;
   onChange?: MouseEventHandler<HTMLButtonElement>;
-  children?: ReactNode | ((trackWidth: number) => React.ReactNode);
 }
 
 export const EuiRangeTrack: FunctionComponent<EuiRangeTrackProps> = ({
@@ -136,7 +135,7 @@ export const EuiRangeTrack: FunctionComponent<EuiRangeTrackProps> = ({
           trackWidth={trackWidth}
         />
       )}
-      {typeof children === 'function' ? children(trackWidth) : children}
+      {children}
     </div>
   );
 };

From 526d3c7f12dd07593ed934e96605167b58c6a229 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 23 Oct 2023 14:28:11 -0700
Subject: [PATCH 5/6] [EuiDualRange] Fix incorrect width calculations caused by
 race condition

- 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
---
 src/components/form/range/dual_range.test.tsx |  7 ++++
 src/components/form/range/dual_range.tsx      | 36 ++++++++++++++-----
 upcoming_changelogs/7305.md                   |  1 +
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/components/form/range/dual_range.test.tsx b/src/components/form/range/dual_range.test.tsx
index 62c6e1cc53e..2c8b029366a 100644
--- 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
index a8abafcdaa6..d1f5c704f0b 100644
--- 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
index c0124072fd1..038d2cedbbe 100644
--- 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"`

From b00f0bcfd6ad660a93e32472d1f797e406832d1b Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 23 Oct 2023 14:39:10 -0700
Subject: [PATCH 6/6] [EuiDualRange] Fix incorrect `onResize` input popover
 logic

- the `width` being passed is the total width of the popover, we want the range track only
---
 src/components/form/range/dual_range.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/form/range/dual_range.tsx b/src/components/form/range/dual_range.tsx
index d1f5c704f0b..f9b78683fce 100644
--- a/src/components/form/range/dual_range.tsx
+++ b/src/components/form/range/dual_range.tsx
@@ -398,9 +398,11 @@ export class EuiDualRangeClass extends Component<
   };
 
   onResize = (width: number) => {
-    this.setState({
-      rangeWidth: width,
-    });
+    if (this.rangeSliderRef) {
+      this.setState({
+        rangeWidth: this.rangeSliderRef.clientWidth,
+      });
+    }
     this.props.inputPopoverProps?.onPanelResize?.(width);
   };