diff --git a/packages/eui/changelogs/upcoming/7767.md b/packages/eui/changelogs/upcoming/7767.md new file mode 100644 index 00000000000..98ecdc942f3 --- /dev/null +++ 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 index aea8900abe2..47801e84d61 100644 --- 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( + + ); + expect(getByLabelText('Min value')).toHaveAttribute('min', '-50'); + expect(getByLabelText('Min value')).toHaveAttribute('max', '50'); + + rerender(); + expect(getByLabelText('Max value')).toHaveAttribute('min', '-50'); + expect(getByLabelText('Max value')).toHaveAttribute('max', '50'); + + rerender(); + 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 index ec196218757..487733bd49c 100644 --- 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}