Fix incorrect min/max values for empty string values

`Number('')` evals to `0` which is why the bug was previously happening
elastic · May 16, 2024 · 0eab7c6 · 0eab7c6
1 parent ae12f8d
commit 0eab7c6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
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}