Selectmenu: Handle form resets

Fixes #12236
Ref gh-1550

2 files changed, 20 insertions, 2 deletions

diff --git a/tests/unit/selectmenu/core.js b/tests/unit/selectmenu/core.js
index 689668e70..1c1a6b622 100644
--- a/tests/unit/selectmenu/core.js
+++ b/tests/unit/selectmenu/core.js
@@ -329,4 +329,22 @@ $.each( [
 	} );
 } );
 
+	asyncTest( "Selectmenu should reset when its parent form resets", function() {
+		expect( 2 );
+
+		var element = $( "#speed" ).selectmenu(),
+			widget = element.selectmenu( "widget" ),
+			initialValue = element.val(),
+			form = element.closest( "form" );
+
+		element.val( "Slower" );
+		element.selectmenu( "refresh" );
+		equal( $.trim( widget.text() ), "Slower" );
+		form[ 0 ].reset();
+		setTimeout( function() {
+			equal( $.trim( widget.text() ), initialValue );
+			start();
+		} );
+	} );
+
 } );
diff --git a/tests/unit/selectmenu/selectmenu.html b/tests/unit/selectmenu/selectmenu.html
index 1df6e3ebc..be8b826c8 100644
--- a/tests/unit/selectmenu/selectmenu.html
+++ b/tests/unit/selectmenu/selectmenu.html
@@ -13,7 +13,7 @@
 <div id="qunit-fixture">
 	<div id="selectmenu-wrap1" class="selectmenu-wrap"></div>
 
-	<div id="selectmenu-wrap2" class="selectmenu-wrap">
+	<form id="selectmenu-wrap2" class="selectmenu-wrap">
 		<label for="speed">Select a speed:</label>
 		<select name="speed" id="speed">
 			<option value="Slower">Slower</option>
@@ -22,7 +22,7 @@
 			<option value="Fast">Fast</option>
 			<option value="Faster">Faster</option>
 		</select>
-	</div>
+	</form>
 
 	<label for="number">Select a number:</label>
 	<select name="number" id="number">