From 601ec01b96af5c7c9344019a3a16d6e1f53295fa Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Thu, 1 Apr 2021 18:55:15 -0600
Subject: [PATCH] Improve quantity input behavior in cart item

---
 components/cart/CartItem/CartItem.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index e6820d32c..846d1d49e 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@@ -35,7 +35,7 @@ const CartItem = ({
 
   const updateItem = useUpdateItem({ item })
   const removeItem = useRemoveItem()
-  const [quantity, setQuantity] = useState(item.quantity)
+  const [quantity, setQuantity] = useState<number | ''>(item.quantity)
   const [removing, setRemoving] = useState(false)
 
   const updateQuantity = async (val: number) => {
@@ -43,10 +43,10 @@ const CartItem = ({
   }
 
   const handleQuantity = (e: ChangeEvent<HTMLInputElement>) => {
-    const val = Number(e.target.value)
+    const val = !e.target.value ? '' : Number(e.target.value)
 
-    if (Number.isInteger(val) && val >= 0) {
-      setQuantity(Number(e.target.value))
+    if (!val || (Number.isInteger(val) && val >= 0)) {
+      setQuantity(val)
     }
   }
   const handleBlur = () => {