Ticket #31885: 31885.diff

src/wp-admin/js/customize-widgets.js

@@ -927 +927 @@
                 },
 
                 /**
-                 * Get the property that represents the state of an input.
+                 * Get the state for an input depending on its type.
                  *
-                 * @param {jQuery|DOMElement} input
-                 * @returns {string}
+                 * @param {jQuery|Element} input
+                 * @returns {string|boolean|array|*}
                  * @private
                  */
-                _getInputStatePropertyName: function( input ) {
-                        var $input = $( input );
+                _getInputState: function( input ) {
+                        input = $( input );
+                        if ( input.is( ':radio, :checkbox' ) ) {
+                                return input.prop( 'checked' );
+                        } else if ( input.is( 'select[multiple]' ) ) {
+                                return input.find( 'option:selected' ).map( function () {
+                                        return $( this ).val();
+                                } ).get();
+                        } else {
+                                return input.val();
+                        }
+                },
 
-                        if ( $input.is( ':radio, :checkbox' ) ) {
-                                return 'checked';
+                /**
+                 * Update an input's state based on its type.
+                 *
+                 * @param {jQuery|Element} input
+                 * @param {string|boolean|array|*} state
+                 * @private
+                 */
+                _setInputState: function ( input, state ) {
+                        input = $( input );
+                        if ( input.is( ':radio, :checkbox' ) ) {
+                                input.prop( 'checked', state );
+                        } else if ( input.is( 'select[multiple]' ) ) {
+                                if ( ! $.isArray( state ) ) {
+                                        state = [];
+                                } else {
+                                        // Make sure all state items are strings since the DOM value is a string
+                                        state = _.map( state, function ( value ) {
+                                                return String( value );
+                                        } );
+                                }
+                                input.find( 'option' ).each( function () {
+                                        $( this ).prop( 'selected', -1 !== _.indexOf( state, String( this.value ) ) );
+                                } );
                         } else {
-                                return 'value';
+                                input.val( state );
                         }
                 },
 
@@ -1016 +1047 @@
                         // we know if it got sanitized; if there is no difference in the sanitized value,
                         // then we do not need to touch the UI and mess up the user's ongoing editing.
                         $inputs.each( function() {
-                                var input = $( this ),
-                                        property = self._getInputStatePropertyName( this );
-                                input.data( 'state' + updateNumber, input.prop( property ) );
+                                $( this ).data( 'state' + updateNumber, self._getInputState( this ) );
                         } );
 
                         if ( instanceOverride ) {
@@ -1071 +1100 @@
                                                 $inputs.each( function( i ) {
                                                         var $input = $( this ),
                                                                 $sanitizedInput = $( $sanitizedInputs[i] ),
-                                                                property = self._getInputStatePropertyName( this ),
                                                                 submittedState, sanitizedState, canUpdateState;
 
                                                         submittedState = $input.data( 'state' + updateNumber );
-                                                        sanitizedState = $sanitizedInput.prop( property );
+                                                        sanitizedState = self._getInputState( $sanitizedInput );
                                                         $input.data( 'sanitized', sanitizedState );
 
-                                                        canUpdateState = ( submittedState !== sanitizedState && ( args.ignoreActiveElement || ! $input.is( document.activeElement ) )   );
+                                                        canUpdateState = ( ! _.isEqual( submittedState, sanitizedState ) && ( args.ignoreActiveElement || ! $input.is( document.activeElement ) ) );
                                                         if ( canUpdateState ) {
-                                                                $input.prop( property, sanitizedState );
+                                                                self._setInputState( $input, sanitizedState );
                                                         }
                                                 } );