Widgets in Customizer fail to sync options in select[multiple]

[westonruter]

When a widget is updated in the Customizer, the form values are serialized and sent via Ajax to pass through the widget's update callback. The widget form with the sanitized values is then sent in the Ajax response. The form inputs in the Ajax response are then copied over from the response into the existing form. This sync logic, however, does not account for the special case of select[multiple] inputs which lack a single value to synchronize: the value to synchronize is an array of zero or more values.

The issue with synchronizing the selected state among a select[multiple] option elements is particularly evident when the widget's underlying setting is changed programmatically, as opposed to direct user input. Here is a demonstration of the issue by using a widget undo/redo feature: ​https://cloudup.com/i7oo4v3X0v6

Plugin used in demo is attached to ticket.

Big props to David Lonjon (​yonderboi) for discovering this issue and suggesting a fix.

[westonruter]

​https://github.com/xwp/wordpress-develop/pull/82

[westonruter]

Demo plugin: Test select[multiple] sync behavior in Widget Customizer ​https://gist.github.com/westonruter/2e56e08881ae296237ca

[westonruter]

Issue is fixed in 31885.diff​. Video of the same demo plugin (test-select-multiple-widget.php​) with the patch applied: ​https://cloudup.com/iR8zseq2Y1G

Note how in the ​video without the patch, programmatically changing the widget's setting results in only one (the first) select[multiple] option being restored to selected. In the ​video with the patch applied, however, the multiple options get their selected states as expected when the widget's setting is updated.

[yonderboi]

I applied the patch to my local environment where I experienced the problem and I confirm that this patch fixes my problem. Thank you!

[ocean90]

In 32012:

Customize Widgets: Improve sync logic for select[multiple] inputs.

The current logic doesn't account for the special case of select[multiple] inputs which lack a single value to synchronize: The value to synchronize is an array of zero or more values.
This change replaces _getInputStatePropertyName() with _getInputState(), which returns the state for an input depending on its type, and _setInputState(), which updates an input's state based on its type.

props westonruter.
fixes #31885.