From feba0271a890ec61da9bbee17a33485c6a70aaba Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 23 Dec 2022 20:00:09 -0800
Subject: [PATCH] Make inputs controlled

---
 components/Input/index.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/components/Input/index.tsx b/components/Input/index.tsx
index 23beb955..6a62dab4 100644
--- a/components/Input/index.tsx
+++ b/components/Input/index.tsx
@@ -1,5 +1,6 @@
+import React, { useEffect, useState } from 'react'
 import classNames from 'classnames'
-import React from 'react'
+
 import './index.scss'
 
 interface Props
@@ -15,8 +16,22 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function input(
   props: Props,
   forwardedRef
 ) {
+  // States
+  const [inputValue, setInputValue] = useState('')
+
+  // Classes
   const classes = classNames({ Input: true }, props.className)
-  const { value, ...inputProps } = props
+  const { defaultValue, ...inputProps } = props
+
+  // Change value when prop updates
+  useEffect(() => {
+    setInputValue(`${props.value}`)
+  }, [props.value])
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setInputValue(event.target.value)
+    if (props.onChange) props.onChange(event)
+  }
 
   return (
     <label className="Label" htmlFor={props.name}>
@@ -24,8 +39,9 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function input(
         {...inputProps}
         autoComplete="off"
         className={classes}
-        defaultValue={props.value || ''}
+        value={inputValue}
         ref={forwardedRef}
+        onChange={handleChange}
         formNoValidate
       />
       {props.label}