[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        |   Keywords:
  Focuses:  javascript    |
--------------------------+-----------------------------
 I have one template which is highly customizable and I created
 "subtemplates" from that by javascript using the wp.customize api.

 After I upgraded to v4.1, I found out, that now the customizer is capable
 to refresh the values if I change it from javascript and I don't have to
 reload the customizer page.

 '''But, it has some small issues:'''
 1. if I set empty for color in one subtemplate and I changed from a
 subtemplate which had this color set, then the color value is empty, but
 the color box, beside the input is colored.
 `api.instance('background_color').set('');` <- I mean that for empty

 2. radio buttons don't get checked correctly. I can say, they are not
 checked at all, after changed one subtemplate to another.

 I try to explain the second one (2):

 I added new setting:
 {{{
 #!php
 $wp_customize->add_setting('title_align', array(
         'default' => 0,
         'sanitize_callback' => 'absint'
 ));
 $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',
         )
 ));
 }}}

 I attached an image, how it lookes like.

 With javascript I'm changing the settings (values):
 {{{
 #!javascript
 (function($)
 {
     $(document).ready(function ()
     {
         var rTSelect = $('input[name="ready_templates"]');
         var api = wp.customize;

         rTSelect.click(function()
         {
             var template = $(this).val();
             switch(template)
             {
                 case "orange": template_orange(); break;
                 case "green": template_green(); break;
                 default: template_default(); break;
             }
         });

         var template_default = function() {
             api.instance('title_align').set(1); //center
         };

         var template_orange = function() {
             api.instance('title_align').set(0); //left
         };

         var template_green = function() {
             api.instance('title_align').set(2); //right
         };
     }
 });
 }}}

 Now I select the orange template after the green template was selected and
 saved, and I see, that the "Left" labeled checkbox is not selected.
 Instead the "Right" labeled checkbox what is selected (checked).

 It is only visually incorrect, because if I click on the save button, the
 data is saved correctly.
 But, it will be visually correct, only if I reload the customizer page.
 The same happens with case 1 (color)

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