diff --git a/src/wp-admin/js/customize-widgets.js b/src/wp-admin/js/customize-widgets.js index ba10a89b1f..8134a984d3 100644 --- a/src/wp-admin/js/customize-widgets.js +++ b/src/wp-admin/js/customize-widgets.js @@ -927,19 +927,50 @@ }, /** - * 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 ); - - if ( $input.is( ':radio, :checkbox' ) ) { - return 'checked'; + _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 'value'; + return input.val(); + } + }, + + /** + * 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 { + input.val( state ); } }, @@ -1016,9 +1047,7 @@ // 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,16 +1100,15 @@ $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 ); } } );