Delete onBlur handlers from currency and token input components (#7824)

As of #7753, the `onBlur` prop is no longer used for the `token-input` and `currency-input` components, and the associated wrapper components and the shared underlying component. It as been removed from all of them.
MetaMask · Jan 15, 2020 · 74557bd · 74557bd
1 parent 73197b4
commit 74557bd
Show file tree

Hide file tree

Showing 6 changed files with 4 additions and 76 deletions.
diff --git a/ui/app/components/ui/currency-input/currency-input.component.js b/ui/app/components/ui/currency-input/currency-input.component.js
@@ -21,7 +21,6 @@ export default class CurrencyInput extends PureComponent {
     maxModeOn: PropTypes.bool,
     nativeCurrency: PropTypes.string,
     onChange: PropTypes.func,
-    onBlur: PropTypes.func,
     useFiat: PropTypes.bool,
     hideFiat: PropTypes.bool,
     value: PropTypes.string,
@@ -99,10 +98,6 @@ export default class CurrencyInput extends PureComponent {
     onChange(hexValue)
   }
 
-  handleBlur = () => {
-    this.props.onBlur(this.state.hexValue)
-  }
-
   renderConversionComponent () {
     const { currentCurrency, nativeCurrency, hideFiat } = this.props
     const { hexValue } = this.state
@@ -145,7 +140,6 @@ export default class CurrencyInput extends PureComponent {
         {...restProps}
         suffix={this.shouldUseFiat() ? fiatSuffix : nativeSuffix}
         onChange={this.handleChange}
-        onBlur={this.handleBlur}
         value={decimalValue}
         maxModeOn={maxModeOn}
         actionComponent={(

diff --git a/ui/app/components/ui/currency-input/tests/currency-input.component.test.js b/ui/app/components/ui/currency-input/tests/currency-input.component.test.js
@@ -162,7 +162,7 @@ describe('CurrencyInput Component', () => {
       handleBlurSpy.resetHistory()
     })
 
-    it('should call onChange and onBlur on input changes with the hex value for ETH', () => {
+    it('should call onChange on input changes with the hex value for ETH', () => {
       const mockStore = {
         metamask: {
           nativeCurrency: 'ETH',
@@ -175,7 +175,6 @@ describe('CurrencyInput Component', () => {
         <Provider store={store}>
           <CurrencyInput
             onChange={handleChangeSpy}
-            onBlur={handleBlurSpy}
             suffix="ETH"
             nativeCurrency="ETH"
             currentCurrency="usd"
@@ -201,14 +200,9 @@ describe('CurrencyInput Component', () => {
       assert.equal(wrapper.find('.currency-display-component').text(), '$231.06USD')
       assert.equal(currencyInputInstance.state.decimalValue, 1)
       assert.equal(currencyInputInstance.state.hexValue, 'de0b6b3a7640000')
-
-      assert.equal(handleBlurSpy.callCount, 0)
-      input.simulate('blur')
-      assert.equal(handleBlurSpy.callCount, 1)
-      assert.ok(handleBlurSpy.calledWith('de0b6b3a7640000'))
     })
 
-    it('should call onChange and onBlur on input changes with the hex value for fiat', () => {
+    it('should call onChange on input changes with the hex value for fiat', () => {
       const mockStore = {
         metamask: {
           nativeCurrency: 'ETH',
@@ -221,7 +215,6 @@ describe('CurrencyInput Component', () => {
         <Provider store={store}>
           <CurrencyInput
             onChange={handleChangeSpy}
-            onBlur={handleBlurSpy}
             suffix="USD"
             nativeCurrency="ETH"
             currentCurrency="usd"
@@ -248,11 +241,6 @@ describe('CurrencyInput Component', () => {
       assert.equal(wrapper.find('.currency-display-component').text(), '0.004328ETH')
       assert.equal(currencyInputInstance.state.decimalValue, 1)
       assert.equal(currencyInputInstance.state.hexValue, 'f602f2234d0ea')
-
-      assert.equal(handleBlurSpy.callCount, 0)
-      input.simulate('blur')
-      assert.equal(handleBlurSpy.callCount, 1)
-      assert.ok(handleBlurSpy.calledWith('f602f2234d0ea'))
     })
 
     it('should change the state and pass in a new decimalValue when props.value changes', () => {
@@ -268,7 +256,6 @@ describe('CurrencyInput Component', () => {
         <Provider store={store}>
           <CurrencyInput
             onChange={handleChangeSpy}
-            onBlur={handleBlurSpy}
             suffix="USD"
             nativeCurrency="ETH"
             currentCurrency="usd"
@@ -304,7 +291,6 @@ describe('CurrencyInput Component', () => {
         <Provider store={store}>
           <CurrencyInput
             onChange={handleChangeSpy}
-            onBlur={handleBlurSpy}
             nativeSuffix="ETH"
             fiatSuffix="USD"
             nativeCurrency="ETH"
@@ -332,11 +318,6 @@ describe('CurrencyInput Component', () => {
       assert.equal(currencyInputInstance.state.decimalValue, 1)
       assert.equal(currencyInputInstance.state.hexValue, 'de0b6b3a7640000')
 
-      assert.equal(handleBlurSpy.callCount, 0)
-      input.simulate('blur')
-      assert.equal(handleBlurSpy.callCount, 1)
-      assert.ok(handleBlurSpy.calledWith('de0b6b3a7640000'))
-
       const swap = wrapper.find('.currency-input__swap-component')
       swap.simulate('click')
       assert.equal(wrapper.find('.currency-display-component').text(), '0.004328ETH')

diff --git a/ui/app/components/ui/token-input/tests/token-input.component.test.js b/ui/app/components/ui/token-input/tests/token-input.component.test.js
@@ -212,7 +212,7 @@ describe('TokenInput Component', () => {
       handleBlurSpy.resetHistory()
     })
 
-    it('should call onChange and onBlur on input changes with the hex value for ETH', () => {
+    it('should call onChange on input changes with the hex value for ETH', () => {
       const mockStore = {
         metamask: {
           currentCurrency: 'usd',
@@ -224,7 +224,6 @@ describe('TokenInput Component', () => {
         <Provider store={store}>
           <TokenInput
             onChange={handleChangeSpy}
-            onBlur={handleBlurSpy}
             selectedToken={{
               address: '0x1',
               decimals: '4',
@@ -253,14 +252,9 @@ describe('TokenInput Component', () => {
       assert.equal(wrapper.find('.currency-display-component').text(), '2ETH')
       assert.equal(tokenInputInstance.state.decimalValue, 1)
       assert.equal(tokenInputInstance.state.hexValue, '2710')
-
-      assert.equal(handleBlurSpy.callCount, 0)
-      input.simulate('blur')
-      assert.equal(handleBlurSpy.callCount, 1)
-      assert.ok(handleBlurSpy.calledWith('2710'))
     })
 
-    it('should call onChange and onBlur on input changes with the hex value for fiat', () => {
+    it('should call onChange on input changes with the hex value for fiat', () => {
       const mockStore = {
         metamask: {
           currentCurrency: 'usd',
@@ -272,7 +266,6 @@ describe('TokenInput Component', () => {
         <Provider store={store}>
           <TokenInput
             onChange={handleChangeSpy}
-            onBlur={handleBlurSpy}
             selectedToken={{
               address: '0x1',
               decimals: '4',
@@ -302,11 +295,6 @@ describe('TokenInput Component', () => {
       assert.equal(wrapper.find('.currency-display-component').text(), '$462.12USD')
       assert.equal(tokenInputInstance.state.decimalValue, 1)
       assert.equal(tokenInputInstance.state.hexValue, '2710')
-
-      assert.equal(handleBlurSpy.callCount, 0)
-      input.simulate('blur')
-      assert.equal(handleBlurSpy.callCount, 1)
-      assert.ok(handleBlurSpy.calledWith('2710'))
     })
 
     it('should change the state and pass in a new decimalValue when props.value changes', () => {
@@ -321,7 +309,6 @@ describe('TokenInput Component', () => {
         <Provider store={store}>
           <TokenInput
             onChange={handleChangeSpy}
-            onBlur={handleBlurSpy}
             selectedToken={{
               address: '0x1',
               decimals: '4',

diff --git a/ui/app/components/ui/token-input/token-input.component.js b/ui/app/components/ui/token-input/token-input.component.js
@@ -20,7 +20,6 @@ export default class TokenInput extends PureComponent {
   static propTypes = {
     currentCurrency: PropTypes.string,
     onChange: PropTypes.func,
-    onBlur: PropTypes.func,
     value: PropTypes.string,
     suffix: PropTypes.string,
     showFiat: PropTypes.bool,
@@ -77,10 +76,6 @@ export default class TokenInput extends PureComponent {
     onChange(hexValue)
   }
 
-  handleBlur = () => {
-    this.props.onBlur && this.props.onBlur(this.state.hexValue)
-  }
-
   renderConversionComponent () {
     const { selectedTokenExchangeRate, showFiat, currentCurrency, hideConversion } = this.props
     const { decimalValue } = this.state
@@ -135,7 +130,6 @@ export default class TokenInput extends PureComponent {
         {...restProps}
         suffix={suffix}
         onChange={this.handleChange}
-        onBlur={this.handleBlur}
         value={decimalValue}
       >
         { this.renderConversionComponent() }

diff --git a/ui/app/components/ui/unit-input/tests/unit-input.component.test.js b/ui/app/components/ui/unit-input/tests/unit-input.component.test.js
@@ -92,27 +92,6 @@ describe('UnitInput Component', () => {
       assert.equal(wrapper.state('value'), 123)
     })
 
-    it('should call onBlur on blur with the value', () => {
-      const wrapper = mount(
-        <UnitInput
-          onChange={handleChangeSpy}
-          onBlur={handleBlurSpy}
-        />
-      )
-
-      assert.ok(wrapper)
-      assert.equal(handleChangeSpy.callCount, 0)
-      assert.equal(handleBlurSpy.callCount, 0)
-      const input = wrapper.find('input')
-      input.simulate('change', { target: { value: 123 } })
-      assert.equal(handleChangeSpy.callCount, 1)
-      assert.ok(handleChangeSpy.calledWith(123))
-      assert.equal(wrapper.state('value'), 123)
-      input.simulate('blur')
-      assert.equal(handleBlurSpy.callCount, 1)
-      assert.ok(handleBlurSpy.calledWith(123))
-    })
-
     it('should set the component state value with props.value', () => {
       const wrapper = mount(
         <UnitInput

diff --git a/ui/app/components/ui/unit-input/unit-input.component.js b/ui/app/components/ui/unit-input/unit-input.component.js
@@ -14,7 +14,6 @@ export default class UnitInput extends PureComponent {
     actionComponent: PropTypes.node,
     error: PropTypes.bool,
     maxModeOn: PropTypes.bool,
-    onBlur: PropTypes.func,
     onChange: PropTypes.func,
     placeholder: PropTypes.string,
     suffix: PropTypes.string,
@@ -56,11 +55,6 @@ export default class UnitInput extends PureComponent {
     this.props.onChange(value)
   }
 
-  handleBlur = () => {
-    const { onBlur } = this.props
-    typeof onBlur === 'function' && onBlur(this.state.value)
-  }
-
   getInputWidth (value) {
     const valueString = String(value)
     const valueLength = valueString.length || 1
@@ -86,7 +80,6 @@ export default class UnitInput extends PureComponent {
               value={value}
               placeholder={placeholder}
               onChange={this.handleChange}
-              onBlur={this.handleBlur}
               style={{ width: this.getInputWidth(value) }}
               ref={ref => {
                 this.unitInput = ref