From 8d3f3d60f7d9db0aa6060659af75e2496af91490 Mon Sep 17 00:00:00 2001
From: Princi Vershwal <vershwal.princi@gmail.com>
Date: Thu, 14 Dec 2023 17:23:35 +0530
Subject: [PATCH] Removed onBlur error feedback on Tier detail modal (#19381)

Fixes
[PROD-265](https://linear.app/tryghost/issue/PROD-265/remove-onblur-error-feedback-on-tier-detail-modal)
---
 .../membership/tiers/TierDetailModal.tsx       | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx b/apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx
index e68ed338a0..f0b390b5ea 100644
--- a/apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx
@@ -37,7 +37,7 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
         yearly_price: () => (formState.type !== 'free' ? validateCurrencyAmount(formState.yearly_price || 0, formState.currency, {allowZero: false}) : undefined)
     };
 
-    const {formState, saveState, updateForm, handleSave, errors, setErrors, clearError, okProps} = useForm<TierFormState>({
+    const {formState, saveState, updateForm, handleSave, errors, clearError, okProps} = useForm<TierFormState>({
         initialState: {
             ...(tier || {}),
             trial_days: tier?.trial_days?.toString() || '',
@@ -105,16 +105,6 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
         onSaveError: handleError
     });
 
-    const validateField = (key: string) => {
-        const error = validators[key as keyof Tier]?.();
-
-        if (error) {
-            setErrors({...errors, [key]: error});
-        } else {
-            clearError(key);
-        }
-    };
-
     const benefits = useSortableIndexedList({
         items: formState.benefits || [],
         setItems: newBenefits => updateForm(state => ({...state, benefits: newBenefits})),
@@ -227,8 +217,8 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                         title='Name'
                         value={formState.name || ''}
                         autoFocus
-                        onBlur={() => validateField('name')}
                         onChange={e => updateForm(state => ({...state, name: e.target.value}))}
+                        onKeyDown={() => clearError('name')}
                     />}
                     <TextField
                         autoComplete='off'
@@ -267,8 +257,8 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                                         title='Monthly price'
                                         valueInCents={formState.monthly_price || ''}
                                         hideTitle
-                                        onBlur={() => validateField('monthly_price')}
                                         onChange={price => updateForm(state => ({...state, monthly_price: price}))}
+                                        onKeyDown={() => clearError('monthly_price')}
                                     />
                                     <CurrencyField
                                         error={Boolean(errors.yearly_price)}
@@ -278,8 +268,8 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                                         title='Yearly price'
                                         valueInCents={formState.yearly_price || ''}
                                         hideTitle
-                                        onBlur={() => validateField('yearly_price')}
                                         onChange={price => updateForm(state => ({...state, yearly_price: price}))}
+                                        onKeyDown={() => clearError('yearly_price')}
                                     />
                                 </div>
                             </div>