Select field does not work anymore after upgrade

[antek83]

Issue description:

After upgrade select field does not work anymore.

Just found out the problem is caused by Shortcake.. If I find a solution I'll post it here

Version used:

3.0.4

Using theme_mods or options?

theme_mods

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

Antares_Kirki::add_config( 'antares', array(
	'capability'    => 'edit_theme_options',
	'option_type'   => 'theme_mod',
) );

All the Fields below were working before the upgrade.

Antares_Kirki::add_field( 'antares', array(
    'type'        => 'select',
    'setting'     => 'body_font_family',
    'label'       => __( 'Body Font Family', 'antaresantares'),
    'description' => __( 'Please choose a font for your site. This font-family will be applied to body elements on your page.', 'antares'),
    'section'     => 'typography',
    'default'     => 'Montserrat',
    'priority'    => 20,
    'choices'     => Kirki_Fonts::get_font_choices(),
    'output'      => array(
        array(
            'element'  => 'body, body > div',
            'property' => 'font-family',
        ),
    ),
    'transport'   => 'refresh',
    'js_vars'     => array(
        array(
            'element'  => 'body, body > div',
            'function' => 'css',
            'property' => 'font-family',
        ),
    ),
));

Antares_Kirki::add_field( 'antares', array(
	'type'        => 'typography',
	'settings'    => 'body_font_family',
	'label'       => esc_attr__( 'Body Font Family', 'kirki' ),
	'section'     => 'typography',
	'default'     => array(
		'font-family'    => 'Montserrat'
	),
	'priority'    => 10,
	'output'      => array(
		array(
			'element' => 'body, body > div',
			'function' => 'css',
            'property' => 'font-family',
		),
	),
	'transport'   => 'refresh',
    'js_vars'     => array(
        array(
            'element'  => 'body, body > div',
            'function' => 'css',
            'property' => 'font-family',
        ),
    ),
) );

Antares_Kirki::add_field( 'antares', array(
	'type'        => 'select',
	'settings'    => 'header_effect',
	'label'       => __( 'Header Effect', 'antares' ),
	'section'     => 'header_style',
	'default'     => 'no-shadow',
	'priority'    => 10,
	'multiple'    => 1,
	'choices'     => array(
		'no-shadow'		=> esc_attr__( 'None', 'antares' ),
		'header-shadow' => esc_attr__( 'Shadow', 'antares' ),
	),
) );

[antek83]

Ok it's a Z-index problem caused by Shortcake not Kirki. On line 243 of shortcode-ui/css/shortcode-ui.css

.select2-container {
  z-index: 160000;
  max-width: 300px; }

Not sure if it can be touched directly, there could be a reason why it's like that.. I think the best solution would be to override it with a good old !important just for the customizer... Something like

.wp-customizer .select2-container {
z-index: ----very huge number here ---- !important; }

I'll check if there is anything about it in the Shortcake repo.

User https://github.com/iliman arrived at the same conclusion and actually posted the required code including the ----very huge number here ----

.wp-customizer .select2-container {
	z-index: 999999 !important;
}

[aristath]

Added, will be included in v3.0.5 👍
Thanks for your investigation, saved me a lot of time!

[antek83]

That's nothing Man, thank you for your awesome plugin, saved a lot of us thousand of hours.