Fixed #5278 - ui.buttons doesn't visually reset on form "reset" event or input "change" event

1 files changed, 68 insertions, 23 deletions

diff --git a/ui/jquery.ui.button.js b/ui/jquery.ui.button.js
index 14b8a6504..392f96e4e 100644
--- a/ui/jquery.ui.button.js
+++ b/ui/jquery.ui.button.js
@@ -16,7 +16,31 @@
 var lastActive,
 	baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
 	otherClasses = "ui-state-hover ui-state-active " +
-		"ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon ui-button-text-only";
+		"ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon ui-button-text-only",
+	formResetHandler = function(event) {
+		$(':ui-button', event.target.form).each(function() {
+			var inst = $(this).data('button');
+			setTimeout(function() {
+				inst.refresh()
+			}, 1);
+		});
+	},
+	radioGroup = function(radio) {
+		var name = radio.name,
+			form = radio.form,
+			radios = $([]);
+		if ( name ) {
+			if ( form ) {
+				radios = $( form ).find( "[name='" + name + "']" );
+			} else {
+				radios = $( "[name='" + name + "']", radio.ownerDocument )
+					.filter(function() {
+						return !this.form;
+					});
+			}
+		}
+		return radios;
+	};
 
 $.widget( "ui.button", {
 	options: {
@@ -28,6 +52,8 @@ $.widget( "ui.button", {
 		}
 	},
 	_create: function() {
+		this.element.closest('form').unbind('reset.button').bind('reset.button', formResetHandler);
+		
 		this._determineButtonType();
 		this.hasTitle = !!this.buttonElement.attr( "title" );
 
@@ -66,6 +92,13 @@ $.widget( "ui.button", {
 			.bind( "blur.button", function() {
 				$( this ).removeClass( focusClass );
 			});
+			
+		if ( toggleButton ) {
+			var self = this;
+			this.element.bind('change.button', function() {
+				self.refresh();
+			});
+		}
 
 		if ( this.type === "checkbox") {
 			this.buttonElement.bind( "click.button", function() {
@@ -83,27 +116,14 @@ $.widget( "ui.button", {
 				$( this ).addClass( "ui-state-active" );
 				self.buttonElement.attr( "aria-pressed", true );
 
-				var radio = self.element[ 0 ],
-					name = radio.name,
-					form = radio.form,
-					radios;
-				if ( name ) {
-					if ( form ) {
-						radios = $( form ).find( "[name='" + name + "']" );
-					} else {
-						radios = $( "[name='" + name + "']", radio.ownerDocument )
-							.filter(function() {
-								return !this.form;
-							});
-					}
-					radios
-						.not( radio )
-						.map(function() {
-							return $( this ).button( "widget" )[ 0 ];
-						})
-						.removeClass( "ui-state-active" )
-						.attr( "aria-pressed", false );
-				}
+				var radio = self.element[ 0 ];
+				radioGroup( radio )
+					.not( radio )
+					.map(function() {
+						return $( this ).button( "widget" )[ 0 ];
+					})
+					.removeClass( "ui-state-active" )
+					.attr( "aria-pressed", false );
 			});
 		} else {
 			this.buttonElement
@@ -200,6 +220,32 @@ $.widget( "ui.button", {
 		$.Widget.prototype._setOption.apply( this, arguments );
 		this._resetButton();
 	},
+	
+	refresh: function() {
+		if ( this.type === "radio" ) {
+			radioGroup( this.element[0] ).each(function() {
+				if ( $(this).is(':checked') ) {
+					$(this).button('widget')
+						.addClass('ui-state-active')
+						.attr('aria-pressed', true);
+				} else {
+					$(this).button('widget')
+						.removeClass('ui-state-active')
+						.attr('aria-pressed', false);
+				}
+			});
+		} else if ( this.type === "checkbox" ) {
+			if ( this.element.is(':checked') ) {
+				this.buttonElement
+					.addClass('ui-state-active')
+					.attr('aria-pressed', true);
+			} else {
+				this.buttonElement
+					.removeClass('ui-state-active')
+					.attr('aria-pressed', false);
+			}
+		}
+	},
 
 	_resetButton: function() {
 		if ( this.type === "input" ) {
@@ -276,5 +322,4 @@ $.widget( "ui.buttonset", {
 	}
 });
 
-$.fn.log = function() { console.log(this); return this; };
 })( jQuery );