better select behavior on touch devices

w3co · Mar 31, 2015 · fbaa886 · fbaa886
1 parent 3a5d4cd
commit fbaa886
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -187,11 +187,13 @@ <h2>&lt;select&gt;</h2>
 					<option value="v11">Option 11</option>
 				</select>
 				<select class="multitest" size="7" multiple>
-					<option>Option 1</option>
-					<option>Option 2</option>
-					<option>Option 3</option>
-					<option>Option 4</option>
-					<option>Option 5</option>
+					<optgroup label="Multiple select test">
+						<option>Option 1</option>
+						<option>Option 2</option>
+						<option>Option 3</option>
+						<option>Option 4</option>
+						<option>Option 5</option>
+					</optgroup>
 					<optgroup label="Test group3">
 						<option>Option 6</option>
 						<option selected>Option 7</option>

diff --git a/js/jcf.js b/js/jcf.js
@@ -56,7 +56,7 @@
 		// add special rules
 		addCSSRule('.' + commonOptions.hiddenClass, 'position:absolute !important;left:-9999px !important;height:1px !important;width:1px !important;margin:0 !important;border-width:0 !important;-webkit-appearance:none;-moz-appearance:none;appearance:none');
 		addCSSRule('.' + commonOptions.rtlClass + '.' + commonOptions.hiddenClass, 'right:-9999px !important; left: auto !important');
-		addCSSRule('.' + commonOptions.unselectableClass, '-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;');
+		addCSSRule('.' + commonOptions.unselectableClass, '-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0);');
 		addCSSRule('.' + commonOptions.resetAppearanceClass, 'background: none; border: none; -webkit-appearance: none; appearance: none; opacity: 0; filter: alpha(opacity=0);');
 
 		// detect rtl pages

diff --git a/js/jcf.select.js b/js/jcf.select.js
@@ -632,18 +632,19 @@
 				this.onSelectItem(e);
 			}
 		},
-		onItemRelease: function() {
+		onItemRelease: function(e) {
 			// remove event handlers and temporary data
 			this.listHolder.off('jcf-pointerup', this.indexSelector, this.onItemRelease);
 
 			// simulate item selection
 			if (this.tmpListOffsetTop === this.list.offset().top) {
-				this.listHolder.on('click', this.indexSelector, this.onSelectItem);
+				this.listHolder.on('click', this.indexSelector, { savedPointerType: e.pointerType }, this.onSelectItem);
 			}
 			delete this.tmpListOffsetTop;
 		},
 		onSelectItem: function(e) {
 			var clickedIndex = parseFloat(e.currentTarget.getAttribute(this.options.indexAttribute)),
+				pointerType = e.data && e.data.savedPointerType || e.pointerType || 'mouse',
 				range;
 
 			// remove click event handler
@@ -655,7 +656,7 @@
 			}
 
 			if (this.element.prop('multiple')) {
-				if (e.metaKey || e.ctrlKey || e.pointerType === 'touch' || this.options.multipleSelectWithoutKey) {
+				if (e.metaKey || e.ctrlKey || pointerType === 'touch' || this.options.multipleSelectWithoutKey) {
 					// if CTRL/CMD pressed or touch devices - toggle selected option
 					this.realOptions[clickedIndex].selected = !this.realOptions[clickedIndex].selected;
 				} else if (e.shiftKey) {
@@ -683,7 +684,7 @@
 			this.refreshSelectedClass();
 
 			// scroll to active item in desktop browsers
-			if (e.pointerType === 'mouse') {
+			if (pointerType === 'mouse') {
 				this.scrollToActiveOption();
 			}
 
@@ -903,9 +904,6 @@
 				scrollInstance.refresh();
 			}
 
-			// scroll active option into view
-			this.scrollToActiveOption();
-
 			// refresh selectes classes
 			this.refreshSelectedClass();
 		},

diff --git a/js/jcf.textarea.js b/js/jcf.textarea.js
@@ -60,6 +60,7 @@
 			var resizerOffset = this.resizer.offset(),
 				areaOffset = this.fakeElement.offset();
 
+			e.preventDefault();
 			this.dragData = {
 				areaOffset: areaOffset,
 				innerOffsetLeft: e.pageX - resizerOffset.left,