[wp-trac] [WordPress Trac] #30951: Customizer: visible values (choices) not correct after setting it through javascript

[WordPress Trac]

#30951: Customizer: visible values (choices) not correct after setting it through
javascript
--------------------------+------------------------------
 Reporter:  katazina      |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Customize     |     Version:  4.1
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:  javascript
--------------------------+------------------------------

Comment (by westonruter):

 The problem with the checkboxes is that you need to use strings for the
 setting values. So you should create the control with choices like this:

 {{{#!php
 <?php
 // ...
 $wp_customize->add_control('title_align', array(
         'label'   => 'Title alignment',
         'settings'=> 'title_align',
         'section' => 'content_sidebar_title',
         'type'    => 'radio',
         'choices' => array(
                 '0' => 'Left',
                 '1' => 'Center',
                 '2' => 'Right',
         )
 ));
 }}}

 And then you can set a choice via:

 {{{#!js
 api.instance('title_align').set( '1' ); //center
 }}}

 The reason for this is that the radio's synchronizer uses `===` when
 comparing the radio's value with updated setting:

 {{{#!js
 api.Element.synchronizer.radio = {
         update: function( to ) {
                 this.element.filter( function() {
                         return this.value === to;
                 }).prop( 'checked', true );
         },
         refresh: function() {
                 return this.element.filter( ':checked' ).val();
         }
 };
 }}}

 And in the DOM, an input's `value` property is always casted to a string,
 and number can never be identical `===` with a string ( `(1 === '1') ===
 false` ).

 This being the case, we could patch Core to explicitly cast the new value
 to a string, since it will always be compared with a string value anyway:

 {{{#!diff
 diff --git src/wp-includes/js/customize-base.js src/wp-includes/js
 /customize-base.js
 index 5ffa924..2dc4c8e 100644
 --- src/wp-includes/js/customize-base.js
 +++ src/wp-includes/js/customize-base.js
 @@ -491,7 +491,7 @@ window.wp = window.wp || {};
         api.Element.synchronizer.radio = {
                 update: function( to ) {
                         this.element.filter( function() {
 -                               return this.value === to;
 +                               return this.value === String( to );
                         }).prop( 'checked', true );
                 },
                 refresh: function() {

 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/30951#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform