From a33d1b819cb5b5e6597f271003dd2a8e4aeec50d Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Fri, 19 Jan 2018 11:50:23 +0000
Subject: [PATCH] Autocomplete fixes #218

---
 src/components/inputs/AutocompleteInput.jsx | 129 ++++++++------------
 src/components/modals/AddModal.jsx          |  17 ++-
 2 files changed, 66 insertions(+), 80 deletions(-)

diff --git a/src/components/inputs/AutocompleteInput.jsx b/src/components/inputs/AutocompleteInput.jsx
index 65833c2..2187913 100644
--- a/src/components/inputs/AutocompleteInput.jsx
+++ b/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,
-    style: PropTypes.object,
-    children: PropTypes.node
+    value: PropTypes.string,
+    options: PropTypes.array,
+    onChange: PropTypes.func,
+    keepMenuWithinWindowBounds: PropTypes.bool
+  }
+
+  static defaultProps = {
+    onChange: () => {},
+    options: [],
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      maxHeight: MAX_HEIGHT
+    };
   }
 
   calcMaxHeight() {
@@ -33,81 +46,43 @@ 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;
-    const style = {
-      maxHeight: maxHeight+"px"
-    }
-
-    return (
-      <div
-        ref={(el) => {
-          this.autocompleteMenuEl = el;
+    return <div
+      ref={(el) => {
+        this.autocompleteMenuEl = el;
+      }}
+    >
+      <Autocomplete
+        menuStyle={{
+          position: "absolute",
+          overflow: "auto",
+          maxHeight: this.state.maxHeight
         }}
-        className={"maputnik-autocomplete-menu"}
-        style={style}
-      >
-        {this.props.children}
-      </div>
-    )
-  }
-}
-
-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"
-      }}
-      value={this.props.value}
-      items={this.props.options}
-      getItemValue={(item) => item[0]}
-      onSelect={v => this.props.onChange(v)}
-      onChange={(e, v) => this.props.onChange(v)}
-      renderItem={(item, isHighlighted) => (
-        <div
-          key={item[0]}
-          className={classnames({
-            "maputnik-autocomplete-menu-item": true,
-            "maputnik-autocomplete-menu-item-selected": isHighlighted,
-          })}
-        >
-         {item[1]}
-        </div>
-      )}
-    />
+        wrapperProps={{
+          className: "maputnik-autocomplete",
+          style: null
+        }}
+        inputProps={{
+          className: "maputnik-string"
+        }}
+        value={this.props.value}
+        items={this.props.options}
+        getItemValue={(item) => item[0]}
+        onSelect={v => this.props.onChange(v)}
+        onChange={(e, v) => this.props.onChange(v)}
+        renderItem={(item, isHighlighted) => (
+          <div
+            key={item[0]}
+            className={classnames({
+              "maputnik-autocomplete-menu-item": true,
+              "maputnik-autocomplete-menu-item-selected": isHighlighted,
+            })}
+          >
+           {item[1]}
+          </div>
+        )}
+      />
+    </div>
   }
 }
 
diff --git a/src/components/modals/AddModal.jsx b/src/components/modals/AddModal.jsx
index bb30a7c..a32eb6b 100644
--- a/src/components/modals/AddModal.jsx
+++ b/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 !== ""
-      && availableSources.indexOf(this.state.source) < 0
+      // Type has changed
+      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: ""
       });