Merge pull request #126 from input-output-hk/fix/lw-12854-provide-on-blur-handler-for-asset-input

fix: provide asset input with onblur event handler

Author: vetalcore

src/design-system/asset-input/amount-input.component.tsx

@@ -15,6 +15,7 @@ interface Props {
   testId?: string;
   className?: string;
   inputClassName?: string;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
 }
 
 export const AmountInput = ({
@@ -25,6 +26,7 @@ export const AmountInput = ({
   testId,
   className,
   inputClassName,
+  onBlur,
 }: Readonly<Props>): JSX.Element => {
   return (
     <Box className={cn(cx.amountInputSizer, className)} data-value={value}>
@@ -35,6 +37,7 @@ export const AmountInput = ({
         onChange={({ target }): void => onChange?.(target.value)}
         placeholder="0.0"
         data-testid={testId ?? `asset-input-amount-input-${id}`}
+        onBlur={onBlur}
       />
     </Box>
   );

src/design-system/asset-input/asset-input.component.tsx

@@ -16,13 +16,15 @@ interface Props {
   onTickerClick?: (asset: Readonly<AssetWithFiat>) => void;
   onAmountChange?: (asset: Readonly<AssetWithFiat>, amount: string) => void;
   onMaxClick?: (asset: Readonly<AssetWithFiat>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
 }
 
 export const AssetInput = ({
   state,
   onTickerClick,
   onAmountChange,
   onMaxClick,
+  onBlur,
 }: Readonly<Props>): JSX.Element => (
   <div className={cx.root}>
     <Box className={cx.assetNameBox}>
@@ -53,6 +55,7 @@ export const AssetInput = ({
             onChange={(value): void => {
               onAmountChange?.(state.asset, value);
             }}
+            onBlur={onBlur}
           />
         </Box>
       </Flex>

src/design-system/asset-input/asset-input.stories.tsx

@@ -33,7 +33,7 @@ export default {
 const AssetInputMainComponents = (): JSX.Element => (
   <Variants.Row>
     <Variants.Cell>
-      <AssetInput state={validState('1')} />
+      <AssetInput onBlur={() => console.log('blur')} state={validState('1')} />
     </Variants.Cell>
   </Variants.Row>
 );