From 7c8a9f5ad0ffbd3f320ec311f2838c0f10f370e0 Mon Sep 17 00:00:00 2001
From: Laura Silva <91160746+silvalaura@users.noreply.github.com>
Date: Wed, 12 Jul 2023 13:43:34 -0400
Subject: [PATCH] fix(Input Base): Fixed case where default value of 0 did not
 render the default value in the input field (#1109)

Co-authored-by: Jerrod Heiser <jheiser38@gmail.com>
---
 .changeset/fix-inputBase.md                   |  5 +++++
 .../src/components/Input/Input.test.js        | 20 +++++++++++++++++++
 .../InputBase/InputBase.stories.tsx           | 11 ++++++++++
 .../src/components/InputBase/index.tsx        |  9 +++++++--
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fix-inputBase.md

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(
+      <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';
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
         />
+        <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"
diff --git a/packages/react-magma-dom/src/components/InputBase/index.tsx b/packages/react-magma-dom/src/components/InputBase/index.tsx
index 15fe8e0cd..4f19e3f6b 100644
--- a/packages/react-magma-dom/src/components/InputBase/index.tsx
+++ b/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}