Autocomplete fixes #218

src/components/inputs/AutocompleteInput.jsx

@@ -6,11 +6,24 @@ import Autocomplete from 'react-autocomplete'
 
 const MAX_HEIGHT = 140;
 
-class AutocompleteMenu extends React.Component {
+class AutocompleteInput extends React.Component {
   static propTypes = {
-    keepMenuWithinWindowBounds: PropTypes.bool,
+    value: PropTypes.string,
-    style: PropTypes.object,
+    options: PropTypes.array,
-    children: PropTypes.node
+    onChange: PropTypes.func,
+    keepMenuWithinWindowBounds: PropTypes.bool
+  }
+
+  static defaultProps = {
+    onChange: () => {},
+    options: [],
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      maxHeight: MAX_HEIGHT
+    };
   }
 
   calcMaxHeight() {
@@ -33,61 +46,22 @@ class AutocompleteMenu extends React.Component {
     this.calcMaxHeight();
   }
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      maxHeight: MAX_HEIGHT
-    };
-  }
-
-  static defaultProps = {
-    style: {}
-  }
-
   render() {
-    const maxHeight = this.state.maxHeight - this.props.style.marginBottom || 0;
+    return <div
-    const style = {
-      maxHeight: maxHeight+"px"
-    }
-
-    return (
-      <div
       ref={(el) => {
         this.autocompleteMenuEl = el;
       }}
-        className={"maputnik-autocomplete-menu"}
-        style={style}
     >
-        {this.props.children}
+      <Autocomplete
-      </div>
+        menuStyle={{
-    )
+          position: "absolute",
-  }
+          overflow: "auto",
-}
+          maxHeight: this.state.maxHeight
-
+        }}
-class AutocompleteInput extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    options: PropTypes.array,
-    onChange: PropTypes.func,
-    keepMenuWithinWindowBounds: PropTypes.bool
-  }
-
-  static defaultProps = {
-    onChange: () => {},
-    options: [],
-  }
-
-  render() {
-    return <Autocomplete
         wrapperProps={{
           className: "maputnik-autocomplete",
           style: null
         }}
-      renderMenu={(items) => {
-        return <AutocompleteMenu keepMenuWithinWindowBounds={this.props.keepMenuWithinWindowBounds} style={{marginBottom: 4}}>
-          {items}
-        </AutocompleteMenu>
-      }}
         inputProps={{
           className: "maputnik-string"
         }}
@@ -108,6 +82,7 @@ class AutocompleteInput extends React.Component {
           </div>
         )}
       />
+    </div>
   }
 }
 

src/components/modals/AddModal.jsx

@@ -58,11 +58,22 @@ class AddModal extends React.Component {
 
   componentWillUpdate(nextProps, nextState) {
     // Check if source is valid for new type
-    const availableSources = this.getSources(nextState.type);
+    const oldType = this.state.type;
+    const newType = nextState.type;
+
+    const availableSourcesOld = this.getSources(oldType);
+    const availableSourcesNew = this.getSources(newType);
+
     if(
-      this.state.source !== ""
+      // Type has changed
-      && availableSources.indexOf(this.state.source) < 0
+      oldType !== newType
+      && this.state.source !== ""
+      // Was a valid source previously
+      && availableSourcesOld.indexOf(this.state.source) > -1
+      // And is not a valid source now
+      && availableSourcesNew.indexOf(nextState.source) < 0
     ) {
+      // Clear the source
       this.setState({
         source: ""
       });