From 8cdb813255c5a13de51edd4db0aa3ce2f7ad3194 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 1 May 2020 18:55:55 +0200
Subject: [PATCH] InputNumber fix (#2669)

* InputNumber workaround for edit bug

* defaultValue robustness checks
---
 packages/react-components/src/InputBalance.tsx | 16 ++++++++++------
 packages/react-params/src/Param/Balance.tsx    |  5 +++--
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/react-components/src/InputBalance.tsx b/packages/react-components/src/InputBalance.tsx
index 32fd2157e1..35b86188f7 100644
--- a/packages/react-components/src/InputBalance.tsx
+++ b/packages/react-components/src/InputBalance.tsx
@@ -5,7 +5,7 @@
 import { BareProps, BitLength } from './types';
 
 import BN from 'bn.js';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { BitLengthOption } from '@polkadot/react-components/constants';
 import { formatBalance, isBn } from '@polkadot/util';
@@ -36,11 +36,15 @@ const DEFAULT_BITLENGTH = BitLengthOption.CHAIN_SPEC as BitLength;
 const TEN = new BN(10);
 
 function InputBalance ({ autoFocus, className, defaultValue: inDefault, help, isDisabled, isError, isFull, isZeroable, label, labelExtra, maxValue, onChange, onEnter, onEscape, placeholder, style, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement<Props> {
-  const defaultValue = inDefault
-    ? isBn(inDefault)
-      ? inDefault.div(TEN.pow(new BN(formatBalance.getDefaults().decimals))).toString()
-      : formatBalance(inDefault, { forceUnit: '-', withSi: false }).replace(',', isDisabled ? ',' : '')
-    : inDefault;
+  const [defaultValue, setDefaultValue] = useState<string | undefined>();
+
+  useEffect((): void => {
+    inDefault && setDefaultValue(
+      isBn(inDefault)
+        ? inDefault.div(TEN.pow(new BN(formatBalance.getDefaults().decimals))).toString()
+        : formatBalance(inDefault, { forceUnit: '-', withSi: false }).replace(',', isDisabled ? ',' : '')
+    );
+  }, [inDefault, isDisabled]);
 
   return (
     <InputNumber
diff --git a/packages/react-params/src/Param/Balance.tsx b/packages/react-params/src/Param/Balance.tsx
index 83711f4e60..95f5d7ab39 100644
--- a/packages/react-params/src/Param/Balance.tsx
+++ b/packages/react-params/src/Param/Balance.tsx
@@ -5,13 +5,14 @@
 import { Props } from '../types';
 
 import BN from 'bn.js';
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { InputBalance } from '@polkadot/react-components';
 
 import Bare from './Bare';
 
 function Balance ({ className, defaultValue: { value }, isDisabled, isError, label, onChange, onEnter, onEscape, style, withLabel }: Props): React.ReactElement<Props> {
-  const defaultValue = new BN((value as BN || '0').toString()).toString(10);
+  const [defaultValue] = useState(new BN((value as BN || '0').toString()).toString(10));
+
   const _onChange = useCallback(
     (value?: BN): void =>
       onChange && onChange({