Fixes #10 and resolves #11

README.md

@@ -90,6 +90,12 @@ Supports most modern browsers including IE9 and above.
 
 ## Change Log
 
+### v2.1.2
+
+* New option `closeOnScroll` ([#11](https://github.com/Mobius1/Selectr/issues/11)) (see [docs](http://mobius.ovh/docs/selectr/pages/options))
+* Fixed bug with checking dropdown is on-screen ([#10](https://github.com/Mobius1/Selectr/issues/10))
+* Fixed navigation bug ([70168f2](/Mobius1/Selectr/commit/70168f2df967881818116a81ac4edbaa98588381))
+
 ### v2.1.1
 
 * new option `allowDeselect` (see [docs](http://mobius.ovh/docs/selectr/pages/options))

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "mobius1-selectr",
-    "version": "2.1.1",
+    "version": "2.1.2",
     "ignore": [
         ".gitattributes",
         "README.md"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobius1-selectr",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "A lightweight dependency-free javascript select box replacement.",
   "main": "dist/selectr.min.js",
   "scripts": {

src/selectr.js

@@ -1,5 +1,5 @@
 /*!
- * Selectr 2.1.1
+ * Selectr 2.1.2
  * http://mobius.ovh/docs/selectr
  *
  * Released under the MIT license
@@ -99,13 +99,11 @@
 				if (h){ a.apply(e, f); }
 			};
 		},
-		getBoundingRect: function(el) {
+		getBoundingRect: function(el, abs) {
 			var win = window;
-			var doc = document;
-			var body = doc.body;
 			var rect = el.getBoundingClientRect();
-			var offsetX = win.pageXOffset !== undefined ? win.pageXOffset : (doc.documentElement || body.parentNode || body).scrollLeft;
-			var offsetY = win.pageYOffset !== undefined ? win.pageYOffset : (doc.documentElement || body.parentNode || body).scrollTop;
+			var offsetX = abs ? win.pageXOffset : 0;
+			var offsetY = abs ? win.pageYOffset : 0;
 
 			return {
 				bottom: rect.bottom + offsetY,
@@ -463,12 +461,14 @@
 		util.on(document, "keyup", this.events.keyup);
 
 		_.update = util.debounce(function() {
-			if (_.opened) {
+			// Optionally close dropdown on scroll / resize (#11)
+			if (_.opened && _.settings.closeOnScroll) {
 				_.close();
 			}
 			if ( this.width ) {
 				this.container.style.width = this.width;
 			}
+			checkInvert.call(_);
 		}, 50);
 
 		util.on(window, "resize", _.update);
@@ -796,7 +796,7 @@
 		} else {
 			var nextBottom = nextRect.top + nextRect.height;
 			currentOffset = offset + _.optsRect.height;
-			nextOffset = optsTop + nextBottom - currentOffset;
+			nextOffset = optsTop + (nextBottom - currentOffset);
 
 			if (_.activeIdx === 0) {
 				_.optsOptions.scrollTop = 0;
@@ -845,6 +845,24 @@
 		}
 	};
 
+	// Make sure dropdown stays on screen
+	var checkInvert = function() {
+		var s = util.getBoundingRect(this.selected);
+		var o = this.optsOptions.parentNode.offsetHeight;
+		var wh = window.innerHeight;
+		var doInvert =  s.top + s.height + o > wh;
+
+		if (doInvert) {
+			util.addClass(this.container, "inverted");
+			this.isInverted = true;
+		} else {
+			util.removeClass(this.container, "inverted");
+			this.isInverted = false;
+		}
+
+		this.optsRect = util.getBoundingRect(this.optsOptions);
+	};
+
 	var dismiss = function(e) {
 		var target = e.target;
 		if (!this.container.contains(target) && (this.opened || this.container.classList.contains("notice"))) {
@@ -899,7 +917,8 @@
 		searchable: true,
 		clearable: false,
 		sortSelected: false,
-		allowDeselect: false
+		allowDeselect: false,
+		closeOnScroll: false
 	};
 
 	/**
@@ -968,14 +987,15 @@
 
 		this.activeIdx = 0;
 		this.navigating = false;
-		this.elRect = this.el.getBoundingClientRect();
 
 		Emitter.mixin(this);
 
 		build.call(this);
 
 		this.update();
 
+		this.optsRect = util.getBoundingRect(this.optsOptions);
+
 		this.rendered = true;
 
 		var _ = this;
@@ -1033,9 +1053,9 @@
 			value = value.toString().trim();
 		}
 
-		// Can"t pass array to select-one
+		// Can't pass array to select-one
 		if ( !_.el.multiple && isArray ) {
-			return;
+			return false;
 		}
 
 		util.each(this.el.options, function(i, opt) {
@@ -1231,26 +1251,16 @@
 
 		util.addClass(_.container, "open");
 
-		_.optsRect = util.getBoundingRect(_.optsOptions);
+		checkInvert.call(_);
 
-		var wh = window.innerHeight;
-		var scrollHeight = _.optsOptions.scrollHeight;
-		var doInvert = _.elRect.top + _.elRect.height + _.optsRect.height > wh;
+		var scrollHeight = this.optsOptions.scrollHeight;
 
 		if ( scrollHeight <= _.optsRect.height ) {
 			if ( _.requiresPagination ) {
 				paginate.call(_);
 			}
 		}
 
-		if (doInvert) {
-			util.addClass(_.container, "inverted");
-			this.isInverted = true;
-		} else {
-			util.removeClass(_.container, "inverted");
-			this.isInverted = false;
-		}
-
 		util.removeClass(_.container, "notice");
 
 		if (_.settings.searchable && !_.settings.taggable) {
@@ -1261,8 +1271,6 @@
 			}, 10);
 		}
 
-		_.optsRect = util.getBoundingRect(_.optsOptions);
-
 		if ( !this.opened ) {
 			_.emit("selectr.open");
 		}