Selectmenu: Custom select uses label, then placeholder for dialog title

(cherry picked from commit 1b836ee) Closes gh-7404 Fixes gh-7399
jquery-archive · May 27, 2014 · 7342344 · 7342344
1 parent fdfc2d6
commit 7342344
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 3 deletions.
diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
@@ -158,7 +158,7 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		dividerThemeAttr = ( o.dividerTheme && isMultiple ) ? ( " data-" + $.mobile.ns + "divider-theme='" + o.dividerTheme + "'" ) : "";
 		menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' class='ui-selectmenu' id='" + dialogId + "'" + themeAttr + overlayThemeAttr + ">" +
 			"<div data-" + $.mobile.ns + "role='header'>" +
-			"<div class='ui-title'>" + label.getEncodedText() + "</div>"+
+			"<div class='ui-title'></div>"+
 			"</div>"+
 			"<div data-" + $.mobile.ns + "role='content'></div>"+
 			"</div>" );
@@ -397,7 +397,9 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 
 			self.menuType = "page";
 			self.menuPageContent.append( self.list );
-			self.menuPage.find( "div .ui-title" ).text( self.label.text() );
+			self.menuPage
+				.find( "div .ui-title" )
+					.text( self.label.getEncodedText() || self.placeholder );
 		} else {
 			self.menuType = "overlay";
 
@@ -439,7 +441,7 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 			}
 
 			parent = option.parentNode;
-			text = $option.text();
+			text = $option.getEncodedText();
 			anchor  = document.createElement( "a" );
 			classes = [];
 

diff --git a/tests/integration/select/index.html b/tests/integration/select/index.html
@@ -147,6 +147,62 @@
 			</select>
 		</div>
 
+		<div data-nstest-role="fieldcontain" id="select-choice-many-placeholder-container-1">
+			<select name="select-choice-many-placeholder-1" id="select-choice-many-placeholder-1" data-nstest-native-menu="false">
+				<option>Select state...</option>
+				<option value="AL">Alabama</option>
+				<option value="AK">Alaska</option>
+				<option value="AZ">Arizona</option>
+				<option value="AR">Arkansas</option>
+				<option value="CA">California</option>
+				<option value="CO">Colorado</option>
+				<option value="CT">Connecticut</option>
+				<option value="DE">Delaware</option>
+				<option value="FL">Florida</option>
+				<option value="GA">Georgia</option>
+				<option value="HI">Hawaii</option>
+				<option value="ID">Idaho</option>
+				<option value="IL">Illinois</option>
+				<option value="IN">Indiana</option>
+				<option value="IA">Iowa</option>
+				<option value="KS">Kansas</option>
+				<option value="KY">Kentucky</option>
+				<option value="LA">Louisiana</option>
+				<option value="ME">Maine</option>
+				<option value="MD">Maryland</option>
+				<option value="MA">Massachusetts</option>
+				<option value="MI">Michigan</option>
+				<option value="MN">Minnesota</option>
+				<option value="MS">Mississippi</option>
+				<option value="MO">Missouri</option>
+				<option value="MT">Montana</option>
+				<option value="NE">Nebraska</option>
+				<option value="NV">Nevada</option>
+				<option value="NH">New Hampshire</option>
+				<option value="NJ">New Jersey</option>
+				<option value="NM">New Mexico</option>
+				<option value="NY">New York</option>
+				<option value="NC">North Carolina</option>
+				<option value="ND">North Dakota</option>
+				<option value="OH">Ohio</option>
+				<option value="OK">Oklahoma</option>
+				<option value="OR">Oregon</option>
+				<option value="PA">Pennsylvania</option>
+				<option value="RI">Rhode Island</option>
+				<option value="SC">South Carolina</option>
+				<option value="SD">South Dakota</option>
+				<option value="TN">Tennessee</option>
+				<option value="TX">Texas</option>
+				<option value="UT">Utah</option>
+				<option value="VT">Vermont</option>
+				<option value="VA">Virginia</option>
+				<option value="WA">Washington</option>
+				<option value="WV">West Virginia</option>
+				<option value="WI">Wisconsin</option>
+				<option value="WY">Wyoming</option>
+			</select>
+		</div>
+
 		<div data-nstest-role="fieldcontain" id="select-overlay-theme-container">
 			<label for="select-choice-many-overlay-theme-test" class="select">Your state:</label>
 			<select data-nstest-theme="x" data-nstest-overlay-theme="x" name="select-choice-many-overlay-theme-test" id="select-choice-many-overlay-theme-test" data-nstest-native-menu="false">

diff --git a/tests/integration/select/select_core.js b/tests/integration/select/select_core.js
@@ -346,6 +346,26 @@
 		]);
 	});
 
+	asyncTest( "dialog size select title should match the placeholder when there's no label",
+		function() {
+			var $select = $( "#select-choice-many-placeholder-1" ),
+				$label = $( "#select-choice-many-placeholder-1-listbox li:first" ),
+				$button = $select.siblings( "a" );
+
+			$.testHelper.pageSequence([
+				function() {
+					$button.click();
+				},
+
+				function() {
+					deepEqual($.mobile.activePage.find( ".ui-title" ).text(), $label.text());
+					window.history.back();
+				},
+
+				start
+			]);
+		});
+
 	asyncTest( "dialog size select title should match the label when changed after the dialog markup is added to the DOM", function() {
 		var $select = $( "#select-choice-many-1\\.dotTest" ),
 			$label = $select.parent().siblings( "label" ),