[EuiDualRange] Fix buggy highlight positioning (#7305)

elastic · Oct 25, 2023 · cca5099 · cca5099
1 parent 79ef649
commit cca5099
Show file tree

Hide file tree

Showing 10 changed files with 251 additions and 223 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
@@ -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/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();
       });
     });