From d5152643b05227e001a721952508854d0404c7fb Mon Sep 17 00:00:00 2001
From: Jirawat Boonkumnerd <jo06942@gmail.com>
Date: Sat, 24 Feb 2024 22:30:34 +0700
Subject: [PATCH] feat: add validate input on blur

before the input validate on submit, this commit make it validate on input blur, I have tried on change but after focus on the input again the error is gone. and if the input didn't change it's not trigger validate again.
---
 packages/shared/components/SelectorInput.svelte   |  4 ++++
 .../shared/components/inputs/AmountInput.svelte   |  4 ++++
 .../components/inputs/AssetAmountInput.svelte     |  1 +
 packages/shared/components/inputs/Input.svelte    |  5 ++++-
 .../shared/components/inputs/NumberInput.svelte   |  4 ++++
 .../components/inputs/RecipientInput.svelte       |  1 +
 .../shared/components/inputs/TextInput.svelte     | 15 ++++++++++++++-
 7 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/shared/components/SelectorInput.svelte b/packages/shared/components/SelectorInput.svelte
index e967e5e7d49..5f0fdcb68ea 100644
--- a/packages/shared/components/SelectorInput.svelte
+++ b/packages/shared/components/SelectorInput.svelte
@@ -3,6 +3,7 @@
     import { Modal, TextInput, Text, TextType, FontWeight, IOption } from 'shared/components'
     import { fade } from 'svelte/transition'
     import { truncateString } from '@core/utils'
+    import { createEventDispatcher } from 'svelte'
 
     export let labelLocale: string
     export let options: IOption[]
@@ -16,6 +17,8 @@
     // If the attribute is set to false, HTML interprets it as a readonly field.
     export let readonly: boolean | null = null
 
+    const dispatch = createEventDispatcher()
+
     let value: string = selected?.key ?? selected?.value ?? ''
     let previousValue: string = value
     let hasFocus: boolean
@@ -73,6 +76,7 @@
         placeholder={localize(labelLocale)}
         fontSize="sm"
         {readonly}
+        on:blur={() => dispatch('blur')}
         {...$$restProps}
     >
         <div slot="right">
diff --git a/packages/shared/components/inputs/AmountInput.svelte b/packages/shared/components/inputs/AmountInput.svelte
index 10e1d4ec3f0..20e15e2fb1d 100644
--- a/packages/shared/components/inputs/AmountInput.svelte
+++ b/packages/shared/components/inputs/AmountInput.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { NumberInput, FontWeight } from 'shared/components'
+    import { createEventDispatcher } from 'svelte'
 
     export let inputElement: HTMLInputElement | undefined = undefined
     export let fontSize = 24
@@ -8,6 +9,8 @@
     export let hasFocus = false
     export let amount: string = ''
 
+    const dispatch = createEventDispatcher()
+
     $: amount, addLeadingZeroToDecimalSeparator()
 
     function addLeadingZeroToDecimalSeparator(): void {
@@ -26,5 +29,6 @@
     {fontSize}
     alignment="right"
     {fontWeight}
+    on:blur={() => dispatch('blur')}
     {...$$restProps}
 />
diff --git a/packages/shared/components/inputs/AssetAmountInput.svelte b/packages/shared/components/inputs/AssetAmountInput.svelte
index c65408a25bd..19bec3674da 100644
--- a/packages/shared/components/inputs/AssetAmountInput.svelte
+++ b/packages/shared/components/inputs/AssetAmountInput.svelte
@@ -119,6 +119,7 @@
             clearPadding
             clearBorder
             {disabled}
+            on:blur={() => validate()?.catch((err) => console.error(err))}
         />
         {#if getUnitFromTokenMetadata(asset?.metadata)}
             <UnitInput bind:unit bind:isFocused {disabled} tokenMetadata={asset?.metadata} />
diff --git a/packages/shared/components/inputs/Input.svelte b/packages/shared/components/inputs/Input.svelte
index 09f6a76bc70..dc9be6c32c6 100644
--- a/packages/shared/components/inputs/Input.svelte
+++ b/packages/shared/components/inputs/Input.svelte
@@ -165,7 +165,10 @@
                         on:paste={onPaste}
                         on:contextmenu={handleContextMenu}
                         on:focus={() => (hasFocus = true)}
-                        on:blur={() => (hasFocus = false)}
+                        on:blur={() => {
+                            hasFocus = false
+                            dispatch('blur')
+                        }}
                         on:change={() => dispatch('change')}
                         {disabled}
                         {placeholder}
diff --git a/packages/shared/components/inputs/NumberInput.svelte b/packages/shared/components/inputs/NumberInput.svelte
index 2c410483de1..0ef0b999ec9 100644
--- a/packages/shared/components/inputs/NumberInput.svelte
+++ b/packages/shared/components/inputs/NumberInput.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { TextInput } from 'shared/components'
     import { localize } from '@core/i18n'
+    import { createEventDispatcher } from 'svelte'
 
     export let inputElement: HTMLInputElement = undefined
 
@@ -8,6 +9,8 @@
     export let hasFocus = false
     export let value: string
     export let isInteger: boolean
+
+    const dispatch = createEventDispatcher()
 </script>
 
 <TextInput
@@ -18,6 +21,7 @@
     placeholder={localize('general.amount')}
     float={!isInteger}
     integer={isInteger}
+    on:blur={() => dispatch('blur')}
     {...$$restProps}
 >
     <slot name="right-full-h" slot="right-full-h" />
diff --git a/packages/shared/components/inputs/RecipientInput.svelte b/packages/shared/components/inputs/RecipientInput.svelte
index e39d94c7d9d..f6ef722c918 100644
--- a/packages/shared/components/inputs/RecipientInput.svelte
+++ b/packages/shared/components/inputs/RecipientInput.svelte
@@ -74,6 +74,7 @@
     {disabled}
     options={accountOptions}
     pickerHeight="max-h-48"
+    on:blur={() => validate()?.catch((err) => console.error(err))}
     {...$$restProps}
     let:option
 >
diff --git a/packages/shared/components/inputs/TextInput.svelte b/packages/shared/components/inputs/TextInput.svelte
index 12507716d33..a5d0d25ad46 100644
--- a/packages/shared/components/inputs/TextInput.svelte
+++ b/packages/shared/components/inputs/TextInput.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { createEventDispatcher } from 'svelte'
     import Input from './Input.svelte'
     import { FontWeight, InputType, TextPropTypes, TextType } from 'shared/components'
 
@@ -15,11 +16,23 @@
     export let fontSize = 'sm'
     export let lineHeight = '140'
 
+    const dispatch = createEventDispatcher()
+
     let textProps: TextPropTypes
     $: textProps = { type: textType, fontSize, lineHeight, fontWeight }
 </script>
 
-<Input bind:inputElement bind:value bind:hasFocus bind:error type={inputType} {textProps} {alignment} {...$$restProps}>
+<Input
+    bind:inputElement
+    bind:value
+    bind:hasFocus
+    bind:error
+    type={inputType}
+    {textProps}
+    {alignment}
+    on:blur={() => dispatch('blur')}
+    {...$$restProps}
+>
     <slot name="left" slot="left" />
     <slot name="right" slot="right" />
     <slot name="right-full-h" slot="right-full-h" />