New Feature closeOnScroll zurb#351

Author: SrPatinhas

README.md

@@ -213,6 +213,11 @@ Collection object shown with defaults:
 	// If null is used then it will not split the string & search in the whole line
 	// default value is /\s+/ means it will split on whitespace when this is not specified
 	autocompleteSeparator: /\s+/,
+
+
+	// An option to hide the tribute when scrolled
+	// defaults to false, can accept true, or a container to bind the scroll event to.
+	closeOnScroll: true,
 }
 ```
 

src/Tribute.js

@@ -30,7 +30,8 @@ class Tribute {
 					spaceSelectsMatch = false,
 					searchOpts = {},
 					menuItemLimit = null,
-					menuShowMinLength = 0
+					menuShowMinLength = 0,
+					closeOnScroll = false,
 				}) {
 		this.autocompleteMode = autocompleteMode;
 		this.autocompleteSeparator = autocompleteSeparator;
@@ -44,6 +45,7 @@ class Tribute {
 		this.positionMenu = positionMenu;
 		this.hasTrailingSpace = false;
 		this.spaceSelectsMatch = spaceSelectsMatch;
+		this.closeOnScroll = closeOnScroll;
 
 		if (this.autocompleteMode) {
 			trigger = "";

src/TributeMenuEvents.js

@@ -26,6 +26,12 @@ class TributeMenuEvents {
 			false
 		);
 
+		this.closeOnScrollEvent = this.debounce(() => {
+			if (this.tribute.isActive) {
+				this.tribute.hideMenu()
+			}
+		}, 10, false)
+
 		// fixes IE11 issues with mousedown
 		this.tribute.range
 			.getDocument()
@@ -35,14 +41,16 @@ class TributeMenuEvents {
 			.addEventListener("mousedown", this.menuClickEvent, false);
 		window.addEventListener("resize", this.windowResizeEvent);
 
-		if (this.menuContainer) {
-			this.menuContainer.addEventListener(
-				"scroll",
-				this.menuContainerScrollEvent,
-				false
-			);
+		if (this.tribute.closeOnScroll == true) {
+			window.addEventListener('scroll', this.closeOnScrollEvent)
+		} else if (this.tribute.closeOnScroll != false) {
+			this.tribute.closeOnScroll.addEventListener('scroll', this.closeOnScrollEvent, false)
 		} else {
-			window.addEventListener("scroll", this.menuContainerScrollEvent);
+			if (this.menuContainer) {
+				this.menuContainer.addEventListener('scroll', this.menuContainerScrollEvent, false)
+			} else {
+				window.addEventListener('scroll', this.menuContainerScrollEvent)
+			}
 		}
 	}
 
@@ -55,14 +63,16 @@ class TributeMenuEvents {
 			.removeEventListener("MSPointerDown", this.menuClickEvent, false);
 		window.removeEventListener("resize", this.windowResizeEvent);
 
-		if (this.menuContainer) {
-			this.menuContainer.removeEventListener(
-				"scroll",
-				this.menuContainerScrollEvent,
-				false
-			);
+		if (this.tribute.closeOnScroll === true) {
+			window.removeEventListener('scroll', this.closeOnScrollEvent)
+		} else if (this.tribute.closeOnScroll != false) {
+			this.tribute.closeOnScroll.removeEventListener('scroll', this.closeOnScrollEvent)
 		} else {
-			window.removeEventListener("scroll", this.menuContainerScrollEvent);
+			if (this.menuContainer) {
+				this.menuContainer.removeEventListener('scroll', this.menuContainerScrollEvent, false)
+			} else {
+				window.removeEventListener('scroll', this.menuContainerScrollEvent)
+			}
 		}
 	}
 

test/spec/test.js

@@ -2,12 +2,7 @@
 
 import bigList from "./utils/bigList.json";
 
-import {
-  clearDom,
-  createDomElement,
-  fillIn,
-  simulateMouseClick
-} from "./utils/dom-helpers";
+import {clearDom, createDomElement, fillIn, simulateMouseClick, simulateElementScroll} from './utils/dom-helpers';
 
 import { attachTribute, detachTribute } from "./utils/tribute-helpers";
 
@@ -892,3 +887,88 @@ describe("Tribute disabled items cases", function() {
   });
 
 });
+
+
+describe('closeOnScroll tests', function() {
+  afterEach(function () {
+    clearDom();
+  });
+
+  it('Tribute should close when the window is scrolled', () => {
+    let input = createDomElement();
+
+    let collectionObject = {
+      trigger: '@',
+      closeOnScroll: true,
+      values: [
+        { key: 'Jordan Humphreys', value: 'Jordan Humphreys', email: 'getstarted@zurb.com' },
+        { key: 'Sir Walter Riley', value: 'Sir Walter Riley', email: 'getstarted+riley@zurb.com' }
+      ],
+    };
+
+    let tribute = attachTribute(collectionObject, input.id);
+    fillIn(input, '@');
+
+    expect(tribute.isActive).toBe(true);
+    simulateElementScroll(window);
+
+    // Need a slight delay otherwise we'll check for the result to fast
+    setTimeout(() => {
+      expect(tribute.isActive).toBe(false);
+    }, 50)
+
+    detachTribute(tribute, input.id);
+  });
+
+  it('Tribute should close when the container is scrolled', () => {
+    let input = createDomElement();
+    let container = document.createElement('div');
+
+    let collectionObject = {
+      trigger: '@',
+      closeOnScroll: 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' }
+      ],
+    };
+
+    let tribute = attachTribute(collectionObject, input.id);
+    fillIn(input, '@');
+
+    expect(tribute.isActive).toBe(true);
+    simulateElementScroll(container);
+
+    // Need a slight delay otherwise we'll check for the result to fast
+    setTimeout(() => {
+      expect(tribute.isActive).toBe(false);
+    }, 50)
+
+    detachTribute(tribute, input.id);
+  });
+
+  it('Tribute should not close when scrolled without the closeOnScroll set', () => {
+    let input = createDomElement();
+
+    let collectionObject = {
+      trigger: '@',
+      values: [
+        { key: 'Jordan Humphreys', value: 'Jordan Humphreys', email: 'getstarted@zurb.com' },
+        { key: 'Sir Walter Riley', value: 'Sir Walter Riley', email: 'getstarted+riley@zurb.com' }
+      ],
+    };
+
+    let tribute = attachTribute(collectionObject, input.id);
+    fillIn(input, '@');
+
+    expect(tribute.isActive).toBe(true);
+    simulateElementScroll(window);
+
+    // Need a slight delay otherwise we'll check for the result to fast
+    setTimeout(() => {
+      expect(tribute.isActive).toBe(true);
+    }, 50)
+
+    detachTribute(tribute, input.id);
+  });
+});

test/spec/utils/dom-helpers.js

@@ -40,3 +40,7 @@ export const simulateMouseClick = function(targetNode) {
     triggerMouseEvent(targetNode, eventType);
   });
 }
+
+export const simulateElementScroll = function(container) {
+  container.dispatchEvent(new Event('scroll'));
+}

tributejs.d.ts

@@ -87,6 +87,10 @@ export type TributeCollection<T extends {}> = {
 
 	// specify if the current match should be selected when the spacebar is hit
 	spaceSelectsMatch?: boolean;
+
+	// specify whether to close when scrolled, and optionally an element to bind
+	// the scroll event to.
+	closeOnScroll?: any
 };
 
 export type TributeOptions<T> =