Button: Properly refresh button sets with new radio buttons

Fixes #8975
Ref gh-888

Author: scottgonzalez

tests/unit/button/button.html

@@ -40,6 +40,11 @@
 	<input type="radio" id="radio02" name="radio"><label for="radio02">Choice 2</label>
 	<input type="radio" id="radio03" name="radio"><label for="radio03">Choice 3</label>
 </div>
+<div id="checkbox0">
+	<input type="checkbox" id="checkbox01" name="checkbox"><label for="checkbox01">Choice 1</label>
+	<input type="checkbox" id="checkbox02" name="checkbox"><label for="checkbox02">Choice 2</label>
+	<input type="checkbox" id="checkbox03" name="checkbox"><label for="checkbox03">Choice 3</label>
+</div>
 <form>
 	<div id="radio1" style="margin-top: 2em;">
 		<input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>

tests/unit/button/button_methods.js

@@ -49,4 +49,26 @@ test( "refresh: Ensure disabled state is preserved correctly.", function() {
 	ok( !element.button( "option", "disabled" ), "Changing a radio button's disabled property should update the state after refresh.");
 });
 
+// #8975
+test( "refresh: buttonset should turn added elements into button widgets", function() {
+	expect( 2 );
+	var radioButtonset = $( "#radio0" ).buttonset(),
+		checkboxButtonset = $( "#checkbox0" ).buttonset();
+
+	radioButtonset.append(
+		"<input type='radio' name='radio' id='radio04'>" +
+		"<label for='radio04'>Choice 4</label>"
+	);
+	checkboxButtonset.append(
+		"<input type='checkbox' name='checkbox' id='checkbox04'>" +
+		"<label for='checkbox04'>Choice 4</label>"
+	);
+
+	radioButtonset.buttonset( "refresh" );
+	checkboxButtonset.buttonset( "refresh" );
+
+	equal( radioButtonset.find( ":ui-button" ).length, 4, "radio" );
+	equal( checkboxButtonset.find( ":ui-button" ).length, 4, "checkbox" );
+});
+
 })(jQuery);

ui/button.js

@@ -366,15 +366,17 @@ $.widget( "ui.buttonset", {
 	},
 
 	refresh: function() {
-		var rtl = this.element.css( "direction" ) === "rtl";
+		var rtl = this.element.css( "direction" ) === "rtl",
+			allButtons = this.element.find( this.options.items ),
+			existingButtons = allButtons.filter( ":ui-button" );
 
-		this.buttons = this.element.find( this.options.items )
-			.filter( ":ui-button" )
-				.button( "refresh" )
-			.end()
-			.not( ":ui-button" )
-				.button()
-			.end()
+		// Initialize new buttons
+		allButtons.not( ":ui-button" ).button();
+
+		// Refresh existing buttons
+		existingButtons.button( "refresh" );
+
+		this.buttons = allButtons
 			.map(function() {
 				return $( this ).button( "widget" )[ 0 ];
 			})