fix(Input Base): Fixed case where default value of 0 did not render t…

…he default value in the input field (#1109)

Co-authored-by: Jerrod Heiser <[email protected]>

.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.

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(
+      <Input labelText={labelText} defaultValue={defaultValue} />
+    );
+
+    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(
+      <Input labelText={labelText} defaultValue={defaultValue} />
+    );
+
+    expect(getByLabelText(labelText)).toHaveAttribute('value', '0');
+  });
+
   it('should render an input with a value passed through', () => {
     const labelText = 'test label';
     const value = 'Test Value';

packages/react-magma-dom/src/components/InputBase/InputBase.stories.tsx

@@ -46,6 +46,11 @@ export const Default = args => {
           labelText="Input"
           isClearable
         />
+        <Input
+          defaultValue={0}
+          labelText="Default value `0`"
+          isClearable
+        />
         <PasswordInput
           errorMessage="danger will robinson."
           labelText="PasswordInput"
@@ -141,6 +146,12 @@ export const Inverse = args => {
           isClearable
           isInverse
         />
+        <Input
+          defaultValue={0}
+          labelText="Default value `0`"
+          isClearable
+          isInverse
+        />
         <PasswordInput
           errorMessage="danger will robinson."
           labelText="PasswordInput"

packages/react-magma-dom/src/components/InputBase/index.tsx

@@ -573,7 +573,12 @@ export const InputBase = React.forwardRef<HTMLInputElement, InputBaseProps>(
 
     const [value, setValue] = React.useState<
       string | ReadonlyArray<string> | 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<HTMLInputElement, InputBaseProps>(
             </IconWrapper>
           )}
         </InputWrapper>
-        {isClearable && value && (
+        {isClearable && value !== '' && (
           <IsClearableContainer
             theme={theme}
             iconPosition={iconPosition}