[EuiDualRange] Fix incorrect input min/max values when empty string v…

…alues exist (#7767)
elastic · May 16, 2024 · 1b9c4d5 · 1b9c4d5
1 parent 1dd68eb
commit 1b9c4d5
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/packages/eui/changelogs/upcoming/7767.md b/packages/eui/changelogs/upcoming/7767.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed an `EuiDualRange`s with `showInput` bug, where `min`/`max` values and invalid states were not being correctly set if values were empty strings
diff --git a/packages/eui/src/components/form/range/dual_range.test.tsx b/packages/eui/src/components/form/range/dual_range.test.tsx
@@ -217,6 +217,31 @@ describe('EuiDualRange', () => {
 
         jest.restoreAllMocks();
       });
+
+      it('correctly defaults to min/max props if the lower or upper value is an empty string', () => {
+        const props = {
+          showInput: true,
+          min: -50,
+          max: 50,
+          minInputProps: { 'aria-label': 'Min value' },
+          maxInputProps: { 'aria-label': 'Max value' },
+          onChange: () => {},
+        };
+
+        const { getByLabelText, rerender } = render(
+          <EuiDualRange {...props} value={['20', '']} />
+        );
+        expect(getByLabelText('Min value')).toHaveAttribute('min', '-50');
+        expect(getByLabelText('Min value')).toHaveAttribute('max', '50');
+
+        rerender(<EuiDualRange {...props} value={['', '30']} />);
+        expect(getByLabelText('Max value')).toHaveAttribute('min', '-50');
+        expect(getByLabelText('Max value')).toHaveAttribute('max', '50');
+
+        rerender(<EuiDualRange {...props} value={['', '']} />);
+        expect(getByLabelText('Min value')).not.toBeInvalid();
+        expect(getByLabelText('Max value')).not.toBeInvalid();
+      });
     });
 
     describe('loading', () => {

diff --git a/packages/eui/src/components/form/range/dual_range.tsx b/packages/eui/src/components/form/range/dual_range.tsx
@@ -458,7 +458,7 @@ export class EuiDualRangeClass extends Component<
         // Non-overridable props
         side="min"
         min={min}
-        max={Number(this.upperValue)}
+        max={this.upperValue === '' ? max : Number(this.upperValue)}
         step={step}
         compressed={compressed}
         autoSize={!showInputOnly}
@@ -513,7 +513,7 @@ export class EuiDualRangeClass extends Component<
         {...maxInputProps}
         // Non-overridable props
         side="max"
-        min={Number(this.lowerValue)}
+        min={this.lowerValue === '' ? min : Number(this.lowerValue)}
         max={max}
         step={step}
         compressed={compressed}