diff --git a/.changeset/fix-inputBase.md b/.changeset/fix-inputBase.md new file mode 100644 index 000000000..768e317df --- /dev/null +++ b/.changeset/fix-inputBase.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': patch +--- + +fix(Input Base): Fixed case where default value of `0` did not render the default value in the input field. diff --git a/packages/react-magma-dom/src/components/Input/Input.test.js b/packages/react-magma-dom/src/components/Input/Input.test.js index 0bb71a1e2..4a09d7f78 100644 --- a/packages/react-magma-dom/src/components/Input/Input.test.js +++ b/packages/react-magma-dom/src/components/Input/Input.test.js @@ -244,6 +244,26 @@ describe('Input', () => { expect(getByLabelText(iconAriaLabel)).toBeDisabled(); }); + it('should initially render with value of `defaultValue` if no `value` provided', () => { + const labelText = 'test label'; + const defaultValue = 'defaultValue'; + const { getByLabelText } = render( + + ); + + expect(getByLabelText(labelText)).toHaveAttribute('value', defaultValue); + }); + + it('should render with value "0" when `defaultValue` is 0', () => { + const labelText = 'test label'; + const defaultValue = 0; + const { getByLabelText } = render( + + ); + + expect(getByLabelText(labelText)).toHaveAttribute('value', '0'); + }); + it('should render an input with a value passed through', () => { const labelText = 'test label'; const value = 'Test Value'; diff --git a/packages/react-magma-dom/src/components/InputBase/InputBase.stories.tsx b/packages/react-magma-dom/src/components/InputBase/InputBase.stories.tsx index d4346237e..3642d8ecf 100644 --- a/packages/react-magma-dom/src/components/InputBase/InputBase.stories.tsx +++ b/packages/react-magma-dom/src/components/InputBase/InputBase.stories.tsx @@ -46,6 +46,11 @@ export const Default = args => { labelText="Input" isClearable /> + { isClearable isInverse /> + ( const [value, setValue] = React.useState< string | ReadonlyArray | number - >(props.defaultValue || props.value || ''); + >( + props.defaultValue !== undefined && + props.defaultValue !== null + ? props.defaultValue + : props.value || '' + ); const maxLengthNum = !hasCharacterCounter && maxLength ? maxLength : undefined; @@ -654,7 +659,7 @@ export const InputBase = React.forwardRef( )} - {isClearable && value && ( + {isClearable && value !== '' && (