Select Multiple Not Working inside repeaters

[Vishal-Deshpande]

Issue description:

For select field, multiple option > 1 doesn't work.

It removes all sections completely from customizer except the default ones.

multiple = 1 brings everything back to normal

JS errors:

1. Error: downloadable font: rejected by sanitizer (font-family: "dashicons" style:normal weight:normal stretch:normal src index:0) source: xxx/wp-includes/fonts/dashicons.eot

2. Error: TypeError: invalid 'in' operand data.value
   Source File: xxx/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,underscore,customize-base,wp-a11y,customize-controls,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,&load%5B%5D=jquery-ui-draggable,jquery-ui-slider,jquery-touch-punch,iris,wp-color-picker,jquery-ui-sortable,jquery-ui-button,jquery-ui-spinn&load%5B%5D=er,nav-menu&ver=4.4.2 line 13 > Function

3. Error: NetworkError: A network error occurred.

Version used:

2.2.6

Using theme_mods or options?

theme_mods

Code to reproduce the issue (config + field(s))

Kirki::add_config( 'my_config', array(
    'capability'    => 'edit_theme_options',
    'option_type'   => 'theme_mod',
) );

Kirki::add_section( 'my_section', array(
    'title'          => __( 'Custom CSS' ),
    'description'    => __( 'Add custom CSS here' ),
    'panel'          => '', // Not typically needed.
    'priority'       => 160,
    'capability'     => 'edit_theme_options',
    'theme_supports' => '', // Rarely needed.
) );

Kirki::add_field( 'my_config', array(
    'type'        => 'select',
    'settings'    => 'my_setting',
    'label'       => __( 'This is the label', 'my_textdomain' ),
    'section'     => 'my_section',
    'default'     => 'option-1',
    'priority'    => 10,
    'multiple'    => 999,
    'choices'     => array(
        'option-1' => esc_attr__( 'Option 1', 'my_textdomain' ),
        'option-2' => esc_attr__( 'Option 2', 'my_textdomain' ),
        'option-3' => esc_attr__( 'Option 3', 'my_textdomain' ),
        'option-4' => esc_attr__( 'Option 4', 'my_textdomain' ),
    ),
) );

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[aristath]

Hey there! Are you using the stable version downloaded from wordpress.org or the development branch from this repo? (I forgot to change the version to -dev in the repository)

[aristath]

ok, I think I know what goes on here.

You've set multiple to 999, but the default value is a string.
Since you want multiple values, they will be saved as an array, and that's the way you should define your default value.
So instead of 'option-1' use array( 'option-1' )

[Vishal-Deshpande]

@aristath

Thanks,
Yes, its working perfectly as you said in select field.

But select multiple > 1 is not working in repeater field.

Inside repeater field, select 'multiple' => 999, displays normal select dropdown. Can't select multiple options.

Kirki::add_field( 'my_config', array(
        'type'        => 'repeater',
        'label'       => esc_html__( 'Label Here', 'my_textdomain' ),
        'section'     => 'my_section_name',
        'priority'    => 10,
        'settings'    => 'repeater_settings_name',  
        'fields' => array(

             'my_settings' => array(
                    'type'        => 'select',            
                    'label'       => esc_html__( 'Name Here', 'my_textdomain' ),                        
                    'priority'    => 10,
                    'multiple'    => 999,  
                    'default'     => array('option-1'),
                    'choices'     => array(
                        'option-1' => esc_attr__( 'Option 1', 'my_textdomain' ),
                        'option-2' => esc_attr__( 'Option 2', 'my_textdomain' ),
                        'option-3' => esc_attr__( 'Option 3', 'my_textdomain' ),
                        'option-4' => esc_attr__( 'Option 4', 'my_textdomain' ),
                        )     
                    )
                )  
            );  

[aristath]

Unfortunately multi-select is not yet supported inside repeater fields... I'm marking this one as a feature request and pinging @fovoc to see if we can add it in the next release. 👍

[hellor0bot]

Any updates on multiselects in repeaters?

Thanks.

[aristath]

If I remember correctly this one was fixed...
Closing, reopen if the issue still exists in the develop branch.

[asilcetin]

This issue still exists on my end. Here is the summary:

In a repeater control inside the fields array I have a "multiple select", added like this:

'blocks_post_category_query' => array(
  'type'        => 'select',
  'label'       => esc_attr__( 'Select Categories to Query', 'kirki' ),
  'description' => esc_attr__( 'You may select multiple categories to query your content from.', 'kirki' ),
  'multiple'    => 12,
  'choices'     => array(
    'option-1' => esc_attr__( 'Option 1', 'kirki' ),
    'option-2' => esc_attr__( 'Option 2', 'kirki' ),
    'option-3' => esc_attr__( 'Option 3', 'kirki' ),
    'option-4' => esc_attr__( 'Option 4', 'kirki' ),
    'option-5' => esc_attr__( 'Option 5', 'kirki' ),
  ),
),

This field works fine on the customizer at the first glance:

Allowing me to select multiple options:

However after I save and reopen the customizer, this field shows always empty:

After testing many times I can confirm that this issue happens, when multiple options are selected. If you only select one option, save and refresh the customizer you'll see that selected option in the select field. With multiple selected options you'll get an empty field after refresh.

And I can confirm that this issue exists only INSIDE the repeater, if you have a "multiple select" outside the repeater it works fine.

What can be the reason for this issue?

[asilcetin]

After spending a couple of hours trying to solve this issue, I think I have found the problem:

It's the line 310 in kirki/controls/php/class-kirki-control-repeater.php where the already selected values (in the array field.default) will be compared with the available select choices:

<# _.each( field.choices, function( choice, i ) { #>
  <option value="{{{ i }}}" <# if ( field.default == i ) { #> selected="selected" <# } #>>{{ choice }}</option>
<# }); #>

As you can see the (field.default == i) can only be true if field.default is a single value like ["2"]. That's the reason the multiple-select shows the value correctly if only a single one was defined in the database. Multiple defined values won't work with this code because the field.default will be an array like ["2", "6", "146"].

Since this issue here is closed, I've opened a new issue (#1876) and will address that with a pull request, if this is okay for you.

Best regards.