From 60d142202b9c854610f0a7335f3dce4677e4b003 Mon Sep 17 00:00:00 2001
From: Princi Vershwal <vershwal.princi@gmail.com>
Date: Wed, 6 Dec 2023 13:32:21 +0530
Subject: [PATCH] Remove validation error once user start typing (#19251)

Ref
[PROD-15](https://linear.app/tryghost/issue/PROD-15/validation-issues)
---
 .../components/settings/growth/offers/AddOfferModal.tsx  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx
index 202aa9b356..bcddb5df8a 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx
@@ -129,6 +129,7 @@ const Sidebar: React.FC<SidebarProps> = ({tierOptions,
     handleAmountInput,
     handleCodeInput,
     validate,
+    clearError,
     errors,
     testId,
     handleTrialAmountInput,
@@ -174,6 +175,7 @@ const Sidebar: React.FC<SidebarProps> = ({tierOptions,
                                 handleNameInput(e);
                                 setNameLength(e.target.value.length);
                             }}
+                            onKeyDown={() => clearError('name')}
                         />
                         <TextField
                             error={Boolean(errors.displayTitle)}
@@ -185,6 +187,7 @@ const Sidebar: React.FC<SidebarProps> = ({tierOptions,
                             onChange={(e) => {
                                 handleDisplayTitleInput(e);
                             }}
+                            onKeyDown={() => clearError('displayTitle')}
                         />
                         <TextArea
                             placeholder='Take advantage of this limited-time offer.'
@@ -233,6 +236,7 @@ const Sidebar: React.FC<SidebarProps> = ({tierOptions,
                                     onChange={(e) => {
                                         handleAmountInput(e);
                                     }}
+                                    onKeyDown={() => clearError('amount')}
                                 />
                                 <div className='absolute right-1.5 top-6 z-10'>
                                     <Select
@@ -271,7 +275,9 @@ const Sidebar: React.FC<SidebarProps> = ({tierOptions,
                                 onBlur={validate}
                                 onChange={(e) => {
                                     handleTrialAmountInput(e);
-                                }} />
+                                }} 
+                                onKeyDown={() => clearError('amount')}/>
+                                
                         }
 
                         <TextField
@@ -284,6 +290,7 @@ const Sidebar: React.FC<SidebarProps> = ({tierOptions,
                             onChange={(e) => {
                                 handleCodeInput(e);
                             }}
+                            onKeyDown={() => clearError('code')}
                         />
                     </div>
                 </section>