Custom Fields
Re-Envisioned
Support Meta Box Conditional Logic Conditional items don't appear/disappear until after update

  • Creator
    Topic
  • #31483
    Resolved Monden
    Participant

    Hi,

    I have:

    • A radio with basic yes/no setup
    • A color field with conditional logic to be shown/hidden based on the radio value.

    The issue is that the color field doesn't show/hide after clicking on the radio. It shows/hides after updating the entire page.

    Here's the code:

    // [radio field]
    array (
        'id' => 'custom_color_controller',
        'name' => __( 'Use Custom Color?', 'my-text-domain' ),
        'type' => 'radio',
        'options' => array(
            'yes' => __( 'Yes', 'my-text-domain' ),
            'no' => __( 'No', 'my-text-domain' )
        ),
        'std' => 'no',
    ),
    
    // [color field]
    array (
        'name' => __( 'Select Color', 'my-text-domain' ),
        'id' => 'color_field_demo_id',
        'type' => 'color',
        'alpha_channel' => true,
        'visible' => array(
            array( 'custom_color_controller', '=', 'yes' ),
        ),
        'std' => '#cccccc',
    ),

    There are no console errors/warnings.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #31484
    Monden
    Participant

    Additionally, after clicking on the radio, I noticed that if I resize the browser (and apparently hit a breakpoint / css media query related to the controlled color field), the color field does get hidden/shown as specified by the radio value. So, 1. It doesn't play out on click and 2. It does update on clicking "Update" (updating the page), and also the controlled element appears if a window is resized enough to trigger a css breakpoint.

    Can you confirm this and advise please, thanks.

    #31489
    Long Nguyen
    Moderator

    Hi,

    I do not see any issue with your code on my end. Screen record https://share.getcloudapp.com/jkuEKx2n

    Please try to deactivate all plugins except Meta Box, MB extensions and switch to the default theme of WordPress (Twenty TwentyOne) to recheck this issue.

    #31493
    Monden
    Participant

    Thanks, at least I know it's not an issue with the original code. Can you point me to the JS handling this click event so I could hunt down the conflict?

    #31509
    Long Nguyen
    Moderator

    Hi,

    The code is very complicated, you can check it in the file conditional-logic.js under the plugin folder.
    meta-box-aio/vendor/meta-box/meta-box-conditional-logic/conditional-logic.js
    meta-box-conditional-logic/conditional-logic.js

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.