Menu container positioning

README.md

@@ -159,6 +159,8 @@ Collection object shown with defaults:
   noMatchTemplate: null,
 
   // specify an alternative parent container for the menu
+  // container must be a positioned element for the menu to appear correctly ie. `position: relative;`
+  // default container is the body
   menuContainer: document.body,
 
   // column to search against in the object (accepts function or string)

example/index.html

@@ -29,7 +29,12 @@
         display: block;
         color: #ccc;
       }
-
+      #test-autocomplete-container {
+        position: relative;
+      }
+      #test-autocomplete-textarea-container {
+        position: relative;
+      }
       .float-right {
         float: right;
       }
@@ -63,7 +68,9 @@ <h5>Tribute with a local collection (on <code>@</code>) and a remote one (on <co
         <div class="callout large">
           <h5>Tribute with <code>autocompleteMode:true</code>  on <code>contenteditable</code> element:</h5>
           <!-- <a id="activateInput">@mention</a> -->
-          <p id="test-autocomplete" class="tribute-demo-input" placeholder="States of USA"></p>
+          <div id="test-autocomplete-container">
+            <p id="test-autocomplete" class="tribute-demo-input" placeholder="States of USA"></p>
+          </div>
         </div>
       </div>
     </div>
@@ -73,7 +80,9 @@ <h5>Tribute with <code>autocompleteMode:true</code>  on <code>contenteditable</c
         <div class="callout large">
           <h5>Tribute with <code>autocompleteMode:true</code>  on <code>textarea</code> element:</h5>
 
-           <textarea id="test-autocomplete-textarea" cols="40" rows="10" placeholder="States of USA"></textarea>
+          <div id="test-autocomplete-textarea-container">
+            <textarea id="test-autocomplete-textarea" cols="40" rows="10" placeholder="States of USA"></textarea>
+          </div>
         </div>
       </div>
     </div>
@@ -188,9 +197,10 @@ <h5>Tribute on traditional form elements!</h5>
       }
 
       // example of Tribute in autocomplete mode
-      var tributeAutocompleteTest = new Tribute({
+
+
+      var tributeAttributes = {
         autocompleteMode: true,
-        menuContainer: document.getElementById('content'),
         values: [
           { key: "Alabama", value: "Alabama" },
           { key: "Alaska", value: "Alaska" },
@@ -254,9 +264,12 @@ <h5>Tribute on traditional form elements!</h5>
         menuItemTemplate: function (item) {
           return item.string;
         }
-      });
+      };
+      var tributeAutocompleteTest = new Tribute(Object.assign({menuContainer: document.getElementById('test-autocomplete-container')}, tributeAttributes));
       tributeAutocompleteTest.attach(document.getElementById('test-autocomplete'));
-      tributeAutocompleteTest.attach(document.getElementById('test-autocomplete-textarea'));
+
+      var tributeAutocompleteTestArea = new Tribute(Object.assign({menuContainer: document.getElementById('test-autocomplete-textarea-container')}, tributeAttributes));
+      tributeAutocompleteTestArea.attach(document.getElementById('test-autocomplete-textarea'));
     </script>
   </body>
 </html>

src/TributeRange.js

@@ -78,6 +78,11 @@ class TributeRange {
         }
     }
 
+    get menuContainerIsBody() {
+        return this.tribute.menuContainer === document.body || !this.tribute.menuContainer;
+    }
+
+
     selectElement(targetElement, path, offset) {
         let range
         let elem = targetElement
@@ -477,9 +482,16 @@ class TributeRange {
         let windowLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0)
         let windowTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
 
+        let top = 0;
+        let left = 0;
+        if (this.menuContainerIsBody) {
+          top = rect.top;
+          left = rect.left;
+        }
+
         let coordinates = {
-            top: rect.top + windowTop + span.offsetTop + parseInt(computed.borderTopWidth) + parseInt(computed.fontSize) - element.scrollTop,
-            left: rect.left + windowLeft + span.offsetLeft + parseInt(computed.borderLeftWidth)
+            top: top + windowTop + span.offsetTop + parseInt(computed.borderTopWidth) + parseInt(computed.fontSize) - element.scrollTop,
+            left: left + windowLeft + span.offsetLeft + parseInt(computed.borderLeftWidth)
         }
 
         let windowWidth = window.innerWidth
@@ -551,9 +563,20 @@ class TributeRange {
         let doc = document.documentElement
         let windowLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0)
         let windowTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
+
+        let left = 0
+        let top = 0
+        if (this.menuContainerIsBody) {
+          left = rect.left
+          top = rect.top
+        } else {
+          left = markerEl.offsetLeft;
+          top = markerEl.offsetTop;
+        }
+
         let coordinates = {
-            left: rect.left + windowLeft,
-            top: rect.top + markerEl.offsetHeight + windowTop
+            left: left + windowLeft,
+            top: top + markerEl.offsetHeight + windowTop
         }
         let windowWidth = window.innerWidth
         let windowHeight = window.innerHeight

test/spec/test.js

@@ -373,3 +373,81 @@ it('should display no menu when function returns empty string', () => {
 });
 
 });
+
+describe('Tribute menu positioning', function() {
+  afterEach(function () {
+    clearDom();
+  });
+
+  function checkPosition(collectionObject, input) {
+    let bottomContent = document.createElement('div');
+    bottomContent.style = 'background: blue; height: 400px; width: 10px;';
+    document.body.appendChild(bottomContent);
+
+    let inputRect = input.getBoundingClientRect();
+    let inputX = inputRect.x;
+    let inputY = inputRect.y;
+
+    let tribute = attachTribute(collectionObject, input.id);
+    fillIn(input, '@');
+
+    let popupListWrapper = document.querySelector('.tribute-container');
+    let menuRect = popupListWrapper.getBoundingClientRect();
+    let menuX = menuRect.x;
+    let menuY = menuRect.y;
+
+    detachTribute(tribute, input.id);
+    bottomContent.remove();
+    clearDom();
+    return {x: menuX, y: menuY};
+  }
+
+
+  it('should display a container menu in the same position when menuContainer is specified on an input as when the menuContainer is the body', () => {
+    let input = createDomElement();
+    let container = input.parentElement;
+    container.style = 'position: relative;';
+    let {x: specifiedX, y: specifiedY} = checkPosition({
+        menuContainer: container,
+        values: [
+          { key: 'Jordan Humphreys', value: 'Jordan Humphreys', email: 'getstarted@zurb.com' },
+          { key: 'Sir Walter Riley', value: 'Sir Walter Riley', email: 'getstarted+riley@zurb.com' }
+        ]
+    }, input);
+
+    input = createDomElement();
+    let {x: unspecifiedX, y: unspecifiedY} = checkPosition({
+        values: [
+          { key: 'Jordan Humphreys', value: 'Jordan Humphreys', email: 'getstarted@zurb.com' },
+          { key: 'Sir Walter Riley', value: 'Sir Walter Riley', email: 'getstarted+riley@zurb.com' }
+        ]
+    }, input);
+
+    expect(unspecifiedY).toEqual(specifiedY);
+    expect(unspecifiedX).toEqual(specifiedX);
+  });
+
+  it('should display a container menu in the same position when menuContainer is specified on an contenteditable as when the menuContainer is the body', () => {
+    let input = createDomElement('contenteditable');
+    let container = input.parentElement;
+    container.style = 'position: relative;';
+    let {x: specifiedX, y: specifiedY} = checkPosition({
+        menuContainer: container,
+        values: [
+          { key: 'Jordan Humphreys', value: 'Jordan Humphreys', email: 'getstarted@zurb.com' },
+          { key: 'Sir Walter Riley', value: 'Sir Walter Riley', email: 'getstarted+riley@zurb.com' }
+        ]
+    }, input);
+
+    input = createDomElement('contenteditable');
+    let {x: unspecifiedX, y: unspecifiedY} = checkPosition({
+        values: [
+          { key: 'Jordan Humphreys', value: 'Jordan Humphreys', email: 'getstarted@zurb.com' },
+          { key: 'Sir Walter Riley', value: 'Sir Walter Riley', email: 'getstarted+riley@zurb.com' }
+        ]
+    }, input);
+
+    expect(unspecifiedY).toEqual(specifiedY);
+    expect(unspecifiedX).toEqual(specifiedX);
+  });
+});