Skip to content

Redux style not applied to hidden fields on customizer load #14

@kmob2

Description

@kmob2

When the customizer panel is loaded, and a redux field is hidden on page load, and then made visible, the redux style is not applied to the field. Only the raw HTML field is shown, everything redux related is stripped from the style. Only once you click into the field, the redux style is being applied.
The fields are being hidden using the official Customizer API.

//admin-config.php
array(
    'id'       => 'demo_buttons',
    'type'     => 'button_set',
    'title'    => __( 'Demo Buttons', 'redux-framework-demo' ),
    'options'  => array(
        '1' => 'Option 1',
        '2' => 'Option 2',
        '3' => 'Option 3'
    ),
    'default'   => '1'
),

array(
    'id'            => 'demo_slider',
    'type'          => 'slider',
    'title'    => __( 'Demo Slider', 'redux-framework-demo' ),
    'default'       => 1,
    'min'           => 0,
    'step'          => 1,
    'max'           => 10,
    'display_value' => 'text'
),
//theme-customizer-panel.js
wp.customize( 'mytheme[demo_buttons]', function( setting ) {    

    var setupControl = function( hideInput ) {

        return function( control ) {
            var isDisplayed = function() {
                return $.inArray(setting.get(), hideInput) === -1;
            };

            var setActiveState = function() {
                control.active.set( isDisplayed() );
            };

            control.active.validate = isDisplayed;
            setActiveState();
            setting.bind( setActiveState );
        };
    };

    wp.customize.control( 'mytheme[demo_slider]', setupControl(['1', '2']) ); //Hide demo_slider when demo_buttons 1 or 2 is selected

} );

Any idea on how I could fix this?
Clicking the radio button again, to hide the slider again, and then making them visible again, applies the style again. It seems that something doesn't fire when the customizer is first loaded and a redux field is hidden.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions