Merge pull request #520 from meriadec/bugfix/select-backspace-and-other-stuff

Bugfix/select backspace and other stuff

src/components/SelectCurrency/index.js

@@ -14,7 +14,7 @@ import Select from 'components/base/Select'
 import Box from 'components/base/Box'
 
 type OwnProps = {
-  onChange: Option => void,
+  onChange: (?Option) => void,
   currencies?: CryptoCurrency[],
   value?: CryptoCurrency,
   placeholder: string,
@@ -30,7 +30,9 @@ const mapStateToProps = (state, props: OwnProps) => ({
 })
 
 const SelectCurrency = ({ onChange, value, t, placeholder, currencies, ...props }: Props) => {
-  const options = currencies ? currencies.map(c => ({ ...c, value: c.id, label: c.name })) : []
+  const options = currencies
+    ? currencies.map(c => ({ ...c, value: c.id, label: c.name, currency: c }))
+    : []
   return (
     <Select
       value={value}
@@ -38,7 +40,7 @@ const SelectCurrency = ({ onChange, value, t, placeholder, currencies, ...props
       renderValue={renderOption}
       options={options}
       placeholder={placeholder || t('common:selectCurrency')}
-      onChange={onChange}
+      onChange={item => onChange(item ? item.currency : null)}
       {...props}
     />
   )

src/components/base/Select/index.js

@@ -11,7 +11,7 @@ type Props = {
   // required
   value: ?Option,
   options: Option[],
-  onChange: Option => void,
+  onChange: (?Option) => void,
 
   // custom renders
   renderOption: Option => Node,
@@ -40,6 +40,9 @@ class Select extends Component<Props> {
     if (action === 'select-option') {
       onChange(value)
     }
+    if (action === 'pop-value') {
+      onChange(null)
+    }
   }
 
   render() {
@@ -73,10 +76,10 @@ class Select extends Component<Props> {
         isClearable={isClearable}
         isSearchable={isSearchable}
         blurInputOnSelect={false}
-        onChange={this.handleChange}
         backspaceRemovesValue
         menuShouldBlockScroll
         {...props}
+        onChange={this.handleChange}
       />
     )
   }