From 401c920e4702d44b2e62a72fc8fb1b744808b452 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 8 Nov 2017 15:44:43 +0000
Subject: [PATCH 1/4] Fix to keep autocomplete menu within window bounds.

---
 src/components/inputs/AutocompleteInput.jsx   | 65 ++++++++++++++++++-
 .../layers/LayerSourceLayerBlock.jsx          |  1 +
 2 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/src/components/inputs/AutocompleteInput.jsx b/src/components/inputs/AutocompleteInput.jsx
index a3611cc..6bd14e4 100644
--- a/src/components/inputs/AutocompleteInput.jsx
+++ b/src/components/inputs/AutocompleteInput.jsx
@@ -4,11 +4,68 @@ import classnames from 'classnames'
 import Autocomplete from 'react-autocomplete'
 
 
+class AutocompleteMenu extends React.Component {
+  static propTypes = {
+    keepMenuWithinWindowBounds: PropTypes.bool,
+    style: PropTypes.object,
+    children: PropTypes.none
+  }
+
+  calcMaxHeight() {
+    if(this.props.keepMenuWithinWindowBounds) {
+      const maxHeight = window.innerHeight - this.autocompleteMenuEl.getBoundingClientRect().top;
+      if(maxHeight != this.state.maxHeight) {
+        this.setState({
+          maxHeight: maxHeight
+        })
+      }
+    }
+  }
+  componentDidMount() {
+    this.calcMaxHeight();
+  }
+
+  componentDidUpdate() {
+    this.calcMaxHeight();
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      maxHeight: 90
+    };
+  }
+
+  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;
+        }}
+        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 = {
@@ -17,14 +74,16 @@ class AutocompleteInput extends React.Component {
   }
 
   render() {
-    const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"}>{items}</div>
-
     return <Autocomplete
       wrapperProps={{
         className: "maputnik-autocomplete",
         style: null
       }}
-      renderMenu={AutocompleteMenu}
+      renderMenu={(items) => {
+        return <AutocompleteMenu keepMenuWithinWindowBounds={this.props.keepMenuWithinWindowBounds} style={{marginBottom: 4}}>
+          {items}
+        </AutocompleteMenu>
+      }}
       inputProps={{
         className: "maputnik-string"
       }}
diff --git a/src/components/layers/LayerSourceLayerBlock.jsx b/src/components/layers/LayerSourceLayerBlock.jsx
index b2f6892..838ffd7 100644
--- a/src/components/layers/LayerSourceLayerBlock.jsx
+++ b/src/components/layers/LayerSourceLayerBlock.jsx
@@ -22,6 +22,7 @@ class LayerSourceLayer extends React.Component {
   render() {
     return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}>
       <AutocompleteInput
+        keepMenuWithinWindowBounds={true}
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceLayerIds.map(l => [l, l])}

From b60d101d4277c0812fc03f99159de481f1bbc31f Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 29 Nov 2017 10:19:22 +0000
Subject: [PATCH 2/4] Fixed PropTypes typo.

---
 src/components/inputs/AutocompleteInput.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/inputs/AutocompleteInput.jsx b/src/components/inputs/AutocompleteInput.jsx
index 6bd14e4..11e6d4d 100644
--- a/src/components/inputs/AutocompleteInput.jsx
+++ b/src/components/inputs/AutocompleteInput.jsx
@@ -8,7 +8,7 @@ class AutocompleteMenu extends React.Component {
   static propTypes = {
     keepMenuWithinWindowBounds: PropTypes.bool,
     style: PropTypes.object,
-    children: PropTypes.none
+    children: PropTypes.node
   }
 
   calcMaxHeight() {

From e11a5a823a84be557630e5347a43831dcf9306a5 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 29 Nov 2017 10:20:07 +0000
Subject: [PATCH 3/4] Only limit AutoComplete to window bounds if element is
 fixed.

---
 src/components/layers/LayerSourceLayerBlock.jsx | 4 +++-
 src/components/modals/AddModal.jsx              | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/layers/LayerSourceLayerBlock.jsx b/src/components/layers/LayerSourceLayerBlock.jsx
index 838ffd7..d8b898d 100644
--- a/src/components/layers/LayerSourceLayerBlock.jsx
+++ b/src/components/layers/LayerSourceLayerBlock.jsx
@@ -12,17 +12,19 @@ class LayerSourceLayer extends React.Component {
     value: PropTypes.string,
     onChange: PropTypes.func,
     sourceLayerIds: PropTypes.array,
+    isFixed: PropTypes.bool,
   }
 
   static defaultProps = {
     onChange: () => {},
     sourceLayerIds: [],
+    isFixed: false
   }
 
   render() {
     return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}>
       <AutocompleteInput
-        keepMenuWithinWindowBounds={true}
+        keepMenuWithinWindowBounds={!!this.props.isFixed}
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceLayerIds.map(l => [l, l])}
diff --git a/src/components/modals/AddModal.jsx b/src/components/modals/AddModal.jsx
index ab4a6de..bb30a7c 100644
--- a/src/components/modals/AddModal.jsx
+++ b/src/components/modals/AddModal.jsx
@@ -127,6 +127,7 @@ class AddModal extends React.Component {
       }
       {this.state.type !== 'background' && this.state.type !== 'raster' &&
       <LayerSourceLayerBlock
+        isFixed={true}
         sourceLayerIds={layers}
         value={this.state['source-layer']}
         onChange={v => this.setState({ 'source-layer': v })}

From 33fdc5266799edae44f41e721d03855eea6a278c Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Wed, 29 Nov 2017 10:29:11 +0000
Subject: [PATCH 4/4] Added MAX_HEIGHT constant.

---
 src/components/inputs/AutocompleteInput.jsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/inputs/AutocompleteInput.jsx b/src/components/inputs/AutocompleteInput.jsx
index 11e6d4d..65833c2 100644
--- a/src/components/inputs/AutocompleteInput.jsx
+++ b/src/components/inputs/AutocompleteInput.jsx
@@ -4,6 +4,8 @@ import classnames from 'classnames'
 import Autocomplete from 'react-autocomplete'
 
 
+const MAX_HEIGHT = 140;
+
 class AutocompleteMenu extends React.Component {
   static propTypes = {
     keepMenuWithinWindowBounds: PropTypes.bool,
@@ -14,9 +16,11 @@ class AutocompleteMenu extends React.Component {
   calcMaxHeight() {
     if(this.props.keepMenuWithinWindowBounds) {
       const maxHeight = window.innerHeight - this.autocompleteMenuEl.getBoundingClientRect().top;
-      if(maxHeight != this.state.maxHeight) {
+      const limitedMaxHeight = Math.min(maxHeight, MAX_HEIGHT);
+
+      if(limitedMaxHeight != this.state.maxHeight) {
         this.setState({
-          maxHeight: maxHeight
+          maxHeight: limitedMaxHeight
         })
       }
     }
@@ -32,7 +36,7 @@ class AutocompleteMenu extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      maxHeight: 90
+      maxHeight: MAX_HEIGHT
     };
   }