diff --git a/src/design-system/asset-input/amount-input.component.tsx b/src/design-system/asset-input/amount-input.component.tsx index e8feec4..d9d834a 100644 --- a/src/design-system/asset-input/amount-input.component.tsx +++ b/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) => void; } export const AmountInput = ({ @@ -25,6 +26,7 @@ export const AmountInput = ({ testId, className, inputClassName, + onBlur, }: Readonly): JSX.Element => { return ( @@ -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} /> ); diff --git a/src/design-system/asset-input/asset-input.component.tsx b/src/design-system/asset-input/asset-input.component.tsx index 4d8fa65..3d04989 100644 --- a/src/design-system/asset-input/asset-input.component.tsx +++ b/src/design-system/asset-input/asset-input.component.tsx @@ -16,6 +16,7 @@ interface Props { onTickerClick?: (asset: Readonly) => void; onAmountChange?: (asset: Readonly, amount: string) => void; onMaxClick?: (asset: Readonly) => void; + onBlur?: (event: React.FocusEvent) => void; } export const AssetInput = ({ @@ -23,6 +24,7 @@ export const AssetInput = ({ onTickerClick, onAmountChange, onMaxClick, + onBlur, }: Readonly): JSX.Element => (
@@ -53,6 +55,7 @@ export const AssetInput = ({ onChange={(value): void => { onAmountChange?.(state.asset, value); }} + onBlur={onBlur} /> diff --git a/src/design-system/asset-input/asset-input.stories.tsx b/src/design-system/asset-input/asset-input.stories.tsx index cc8c4c1..4525acf 100644 --- a/src/design-system/asset-input/asset-input.stories.tsx +++ b/src/design-system/asset-input/asset-input.stories.tsx @@ -33,7 +33,7 @@ export default { const AssetInputMainComponents = (): JSX.Element => ( - + console.log('blur')} state={validState('1')} /> );