From 7d668cbf4c2adb9c09006a30f5ad6b891d974769 Mon Sep 17 00:00:00 2001
From: Jack Stevenson <jacsteve@amazon.com>
Date: Tue, 30 Mar 2021 17:43:05 +1100
Subject: [PATCH] fix(Input): Fix rendering of falsy values (#146)

* fix(Input): Fix rendering of falsy values

* fix(Input): improve test since Number('') === 0
---
 src/components/Input/index.test.tsx | 7 +++++++
 src/components/Input/index.tsx      | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Input/index.test.tsx b/src/components/Input/index.test.tsx
index 1c50d5b9..89850d91 100644
--- a/src/components/Input/index.test.tsx
+++ b/src/components/Input/index.test.tsx
@@ -83,6 +83,13 @@ describe('Input', () => {
         expect(getByPlaceholderText('input-1').getAttribute('autocomplete')).toEqual('off');
     });
 
+    it('renders falsy values', () => {
+        const { getByPlaceholderText } = render(
+            <Input type="number" placeholder="input-1" onChange={mockOnChange} value={0} />
+        );
+        expect(getByPlaceholderText('input-1').getAttribute('value')).toEqual('0');
+    });
+
     describe('for search input', () => {
         it('does not render clear button on default', () => {
             const { getByPlaceholderText, queryByTestId } = render(<Input type="search" placeholder="input-1" />);
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index e6500083..721bafbd 100755
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -125,11 +125,11 @@ const mapProps = ({
  */
 const Input: FunctionComponent<InputProps> = ({ onChange = () => {}, ...props }): ReactElement => {
     const [showClearInputButton, setShowClearInputButton] = React.useState(false);
-    const [inputValue, setInputValue] = React.useState(props.value || '');
+    const [inputValue, setInputValue] = React.useState(props.value === undefined ? '' : props.value);
     const id: string = props.controlId || uuidv4();
 
     useEffect(() => {
-        setInputValue(props.value || '');
+        setInputValue(props.value === undefined ? '' : props.value);
     }, [props.value]);
 
     const handleChange = (value: string): void => {