Combobox: rework to make dropdown arrow clickable on IE (fixes ibm-js…

…#397) and to consistently get pointer cursor on all desktop browsers.
wkeese · Dec 10, 2014 · d109a03 · d109a03
1 parent a268cc9
commit d109a03
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 21 deletions.
diff --git a/Combobox.js b/Combobox.js
@@ -1,7 +1,7 @@
 /** @module deliteful/Combobox */
 define([
 	"dcl/dcl",
-	"requirejs-dplugins/jquery!attributes/classes",
+	"requirejs-dplugins/jquery!attributes/classes,event",	// addClass(), css(), on(), off()
 	"dstore/Filter",
 	"decor/sniff",
 	"delite/register",
@@ -210,16 +210,54 @@ define([
 		},
 
 		refreshRendering: function (oldValues) {
+			var updateReadOnly = false;
 			if ("list" in oldValues) {
 				// Programmatic case (List passed as argument of the ctor of Combobox
 				// or set after the initialization phase)
 				this._initList();
-			} else if ("selectionMode" in oldValues) {
+			}
+			if ("selectionMode" in oldValues) {
+				updateReadOnly = true;
 				if (this.list) {
 					this.list.selectionMode = this.selectionMode === "single" ?
 						"radio" : "multiple";
 				}
 			}
+			if ("autoFilter" in oldValues) {
+				updateReadOnly = true;
+			}
+			if (updateReadOnly) {
+				this._updateInputReadOnly();
+				this._setSelectable(this.inputNode, this.selectionMode === "single" && this.autoFilter);
+			}
+		},
+
+		/**
+		 * Updates the value of the private property on which the Combobox template
+		 * binds the readonly attribute of the input element.
+		 * @private 
+		 */
+		_updateInputReadOnly: function () {
+			this._inputReadOnly = !this.autoFilter || this.useCenteredDropDown() ||
+				this.selectionMode === "multiple";
+		},
+
+		/**
+		 * Configures inputNode such that the text is selectable or unselectable.
+		 * @private
+		 */
+		_setSelectable: function (inputNode, selectable) {
+			if (selectable) {
+				inputNode.removeAttribute("unselectable");
+				$(inputNode)
+					.css("user-select", "") // maps to WebkitUserSelect, etc.
+					.off("selectstart", false);
+			} else {
+				inputNode.setAttribute("unselectable", "on");
+				$(inputNode)
+					.css("user-select", "none") // maps to WebkitUserSelect, etc.
+					.on("selectstart", false);
+			}
 		},
 
 		attachedCallback: function () {
@@ -431,13 +469,11 @@ define([
 		},
 
 		_createDropDown: function (list) {
-			var centeredDropDown = this.useCenteredDropDown();
-
-			// The Combobox template binds the readonly attribute of the input
-			// element on this property 
-			this._inputReadOnly = !this.autoFilter || centeredDropDown ||
-				this.selectionMode === "multiple";
+			// Update the readonly attribute in case useCenteredDropDown() changed
+			// its return value.
+			this._updateInputReadOnly();
 
+			var centeredDropDown = this.useCenteredDropDown();
 			var dropDown = centeredDropDown ?
 				this._createCenteredDropDown(list) :
 				this._createNormalDropDown(list);

diff --git a/Combobox/Combobox.html b/Combobox/Combobox.html
@@ -1,7 +1,7 @@
-<template class="d-combobox" role="presentation">
+<template class="d-combobox" role="presentation" attach-point="buttonNode">
 	<input class="d-combobox-input"
 		role="combobox"
-		attach-point="inputNode,buttonNode,focusNode"
+		attach-point="inputNode,focusNode"
 		autocomplete="off" autocorrect="off" autocapitalize="none"
 		aria-autocomplete="list"
 		type="{{this.autoFilter ? 'search' : 'text'}}"

diff --git a/Combobox/themes/Combobox_template.less b/Combobox/themes/Combobox_template.less
@@ -3,17 +3,23 @@
 	vertical-align: middle;
 	margin: 0;
 	padding: 0;
+	/* Setting pointer cursor on root node, input node, and arrow pseudo-element */
+	/* is needed such that the cursor works in all desktop browsers for both */
+	/* the input and the arrow.*/ 
+	cursor: pointer;
 	.d-combobox-styles();
 
 	&::after {
 		/* dropdown arrow */
 		content: "\25BC";
 		padding:0;
 		position: relative;
-		/* allow clicks to pass through */
-		pointer-events: none;
+		cursor: pointer;
 		.d-combobox-arrow-styles();
 	}
+	&::after[disabled] {
+		cursor: auto;
+	}
 	&.d-rtl::after {
 		.d-combobox-arrow-styles-rtl();
 	}
@@ -22,8 +28,14 @@
 	}
 }
 
+.d-combobox[disabled] {
+	cursor: auto;
+	opacity: 0.5;
+}
+
 .d-combobox-input {
 	height: inherit;
+	cursor: pointer;
 
 	/* Necessary for Safari on iOS to avoid misplacement of the dropdown arrow */
 	/* due to the presence of the hidden input which stores the submitted value.*/
@@ -32,6 +44,7 @@
 	&[disabled],
 	fieldset[disabled] & {
 		opacity: 0.5;
+		cursor: auto;
 	}
 }
 

diff --git a/Combobox/themes/bootstrap/Combobox.css b/Combobox/themes/bootstrap/Combobox.css
@@ -3,6 +3,10 @@
   vertical-align: middle;
   margin: 0;
   padding: 0;
+  /* Setting pointer cursor on root node, input node, and arrow pseudo-element */
+  /* is needed such that the cursor works in all desktop browsers for both */
+  /* the input and the arrow.*/
+  cursor: pointer;
   color: #555555;
   font-size: 14px;
   line-height: 1.428571429;
@@ -12,11 +16,13 @@
   content: "\25BC";
   padding: 0;
   position: relative;
-  /* allow clicks to pass through */
-  pointer-events: none;
+  cursor: pointer;
   font-size: .7em;
   right: 1.7em;
 }
+.d-combobox::after[disabled] {
+  cursor: auto;
+}
 .d-combobox.d-rtl::after {
   left: 1.7em;
   /* restore default */
@@ -27,15 +33,21 @@
   /* restore default */
   right: auto;
 }
+.d-combobox[disabled] {
+  cursor: auto;
+  opacity: 0.5;
+}
 .d-combobox-input {
   height: inherit;
+  cursor: pointer;
   /* Necessary for Safari on iOS to avoid misplacement of the dropdown arrow */
   /* due to the presence of the hidden input which stores the submitted value.*/
   margin: 0;
 }
 .d-combobox-input[disabled],
 fieldset[disabled] .d-combobox-input {
   opacity: 0.5;
+  cursor: auto;
 }
 .d-combobox-input,
 .d-combobox-popup-input {

diff --git a/Combobox/themes/holodark/Combobox.css b/Combobox/themes/holodark/Combobox.css
@@ -4,6 +4,10 @@
   vertical-align: middle;
   margin: 0;
   padding: 0;
+  /* Setting pointer cursor on root node, input node, and arrow pseudo-element */
+  /* is needed such that the cursor works in all desktop browsers for both */
+  /* the input and the arrow.*/
+  cursor: pointer;
   color: #555555;
   font-size: 14px;
   line-height: 1.428571429;
@@ -13,11 +17,13 @@
   content: "\25BC";
   padding: 0;
   position: relative;
-  /* allow clicks to pass through */
-  pointer-events: none;
+  cursor: pointer;
   font-size: .7em;
   right: 1.7em;
 }
+.d-combobox::after[disabled] {
+  cursor: auto;
+}
 .d-combobox.d-rtl::after {
   left: 1.7em;
   /* restore default */
@@ -28,15 +34,21 @@
   /* restore default */
   right: auto;
 }
+.d-combobox[disabled] {
+  cursor: auto;
+  opacity: 0.5;
+}
 .d-combobox-input {
   height: inherit;
+  cursor: pointer;
   /* Necessary for Safari on iOS to avoid misplacement of the dropdown arrow */
   /* due to the presence of the hidden input which stores the submitted value.*/
   margin: 0;
 }
 .d-combobox-input[disabled],
 fieldset[disabled] .d-combobox-input {
   opacity: 0.5;
+  cursor: auto;
 }
 .d-combobox-input,
 .d-combobox-popup-input {

diff --git a/Combobox/themes/ios/Combobox.css b/Combobox/themes/ios/Combobox.css
@@ -4,6 +4,10 @@
   vertical-align: middle;
   margin: 0;
   padding: 0;
+  /* Setting pointer cursor on root node, input node, and arrow pseudo-element */
+  /* is needed such that the cursor works in all desktop browsers for both */
+  /* the input and the arrow.*/
+  cursor: pointer;
   color: #555555;
   font-size: 14px;
   line-height: 1.428571429;
@@ -13,11 +17,13 @@
   content: "\25BC";
   padding: 0;
   position: relative;
-  /* allow clicks to pass through */
-  pointer-events: none;
+  cursor: pointer;
   font-size: .7em;
   right: 1.7em;
 }
+.d-combobox::after[disabled] {
+  cursor: auto;
+}
 .d-combobox.d-rtl::after {
   left: 1.7em;
   /* restore default */
@@ -28,15 +34,21 @@
   /* restore default */
   right: auto;
 }
+.d-combobox[disabled] {
+  cursor: auto;
+  opacity: 0.5;
+}
 .d-combobox-input {
   height: inherit;
+  cursor: pointer;
   /* Necessary for Safari on iOS to avoid misplacement of the dropdown arrow */
   /* due to the presence of the hidden input which stores the submitted value.*/
   margin: 0;
 }
 .d-combobox-input[disabled],
 fieldset[disabled] .d-combobox-input {
   opacity: 0.5;
+  cursor: auto;
 }
 .d-combobox-input,
 .d-combobox-popup-input {

diff --git a/tests/functional/Combobox-decl.html b/tests/functional/Combobox-decl.html
@@ -105,7 +105,7 @@
 		<d-radio-button name="radio" id="is" checked="false"></d-radio-button>
 		<label for="is">is</label>
 		<d-checkbox id="ignoreCase" checked></d-checkbox>
-		<label for="ignoreCase">Ignore Case</label></p>
+		<label for="ignoreCase">Ignore Case</label>
 	</fieldset>
 
 	<p>

diff --git a/tests/functional/Combobox-prog.html b/tests/functional/Combobox-prog.html
@@ -174,15 +174,15 @@
 	<span id="combo-single-autoFilter"></span>
 
 	<fieldset>
-	<legend>Filtering options</legend>
+		<legend>Filtering options</legend>
 		<d-radio-button name="radio" id="startsWith" checked="true"></d-radio-button>
 		<label for="startsWith">startsWith</label>
 		<d-radio-button name="radio" id="contains" checked="false"></d-radio-button>
 		<label for="contains">contains</label>
 		<d-radio-button name="radio" id="is" checked="false"></d-radio-button>
 		<label for="is">is</label>
 		<d-checkbox id="ignoreCase" checked></d-checkbox>
-		<label for="ignoreCase">Ignore Case</label></p>
+		<label for="ignoreCase">Ignore Case</label>
 	</fieldset>
 
 	<p>