fix(Input): Fix rendering of falsy values (#146)

* fix(Input): Fix rendering of falsy values * fix(Input): improve test since Number('') === 0
aws · Mar 30, 2021 · 7d668cb · 7d668cb
1 parent 82cf5be
commit 7d668cb
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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 => {