Extra autocompleters

src/accessions/ui/c/Filters.tsx

@@ -35,9 +35,16 @@ const AccessionFilters = ({handleSubmit, initialValues, initialize, filterCode,
           name="institute.code"
           terms={ terms && terms.get('institute.code') }
           label={ t('accessions.common.instituteCode') }
-          placeholder="NGA039"
+          placeholder="NGA039, IITA, International"
+        />
+        <AutocompleteFilter
+          filterCode={ filterCode }
+          autocomplete={ autocomplete }
+          name="institute.country.code3"
+          terms={ terms && terms.get('institute.country.iso3') }
+          label={ t('accessions.model.institute.country.iso3') }
+          placeholder="NGA, Nigeria"
         />
-        <StringArrFilter name="institute.country.code3" label={ t('accessions.model.institute.country.iso3') } placeholder="NGA"/>
         <StringFilter name="accessionNumber" searchType="contains" label={ t('accessions.common.acceNumb') } placeholder="IRGC"/>
         <NumberFilter name="seqNo" label={ t('accessions.public.f.seqNumber') } />
       </CollapsibleComponentSearch>
@@ -81,7 +88,14 @@ const AccessionFilters = ({handleSubmit, initialValues, initialize, filterCode,
         <StringFilter name="taxonomy.subtaxa" searchType="contains" label={ t('accessions.public.f.subtaxon') } placeholder=""/>
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch title={ t('accessions.public.f.originOfMaterial') }>
-        <StringArrFilter name="countryOfOrigin.code3" terms={ terms && terms.get('countryOfOrigin.code3') } label={ t('accessions.common.countryOfOrigin') } placeholder="SVN"/>
+        <AutocompleteFilter
+          filterCode={ filterCode }
+          autocomplete={ autocomplete }
+          name="countryOfOrigin.code3"
+          terms={ terms && terms.get('countryOfOrigin.code3') }
+          label={ t('accessions.common.countryOfOrigin') }
+          placeholder="SVN, Slovenia"
+        />
         <NumberFilter name="geo.latitude" label={ t('geo.common.latitude') } />
         <NumberFilter name="geo.longitude" label={ t('geo.common.longitude') } />
         <NumberFilter name="geo.elevation" label={ t('accessions.public.f.elevation') } />

src/ui/common/filter/AutocompleteFilter.tsx

 import * as React from 'react';
-import { Fields, change, Field } from 'redux-form';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
+import { Fields, Field } from 'redux-form';
 import { translate } from 'react-i18next';
 import * as _ from 'lodash';
 
@@ -230,7 +228,7 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
   }
 
   public render() {
-    const { placeholder, label, t, names, name, terms, classes } = this.props;
+    const { placeholder, label, t, names, terms, classes } = this.props;
     const { input } = _.get(this.props, names[0]);
     const { input: notInput } = _.get(this.props, names[1]);
     const { values, notValues } = this.state;
@@ -238,7 +236,7 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
     return (
       <div>
           <Field
-            name={ `${name}` }
+            name={ `auto-${names[0]}` }
             component={ MaterialAutosuggest }
             label={ label }
             placeholder={ placeholder }
@@ -306,8 +304,4 @@ class AutocompleteFilter extends React.Component<IAutocompleteFilter, any> {
   }
 }
 
-const mapDispatchToProps = (dispatch) => bindActionCreators({
-  change,
-}, dispatch);
-
-export default connect(null, mapDispatchToProps)(translate()(AutocompleteFilter));
+export default translate()(AutocompleteFilter);