Custom Fields
Support Meta Box Conditional Logic Conditional Logic and Group extensions

  • Creator
  • #12093

    We are trying to create conditional logic based on the dropdown of a group field. The issue is that when the dropdown is selected and the conditional logic is satisfied the field is being rendered, but its being rendered also when the _state of the group is set to ‘collapsed’.

    Therefore we tried to create a conditional logic with 2 criteria including the dropdown value and the _state, on render it works fine but when we toggle the group and the _state value is updated the conditional logic does not trigger. Please find our last test code below:

Viewing 8 replies - 1 through 8 (of 8 total)
  • Author
  • #12095

    Just a small update. We managed to work around it but we made some changes to both extensions (conditional logic and group). I know this is not ideal and on the next update we will be loosing all changes. Therefore I am attaching the code here such that the plugin author can include these changes in the next update:

    meta-box-group/group.js : line 37

    group.toggle.updateState = function( $group, state ) {
        var $input = $group.find( '.rwmb-group-state' ).last().find( 'input' );
        if ( state ) {
            $input.val( state );
        } else {
            state = $input.val();
        // Store current state. Will be preserved when cloning.
        $input.attr( 'data-current', state );
        $input.trigger('change'); //<<--added this line so that conditional-logic will run the logic when _state changes
        $group.toggleClass( 'rwmb-group-collapsed', 'collapsed' === state )
              .find( '.rwmb-group-toggle-handle' ).first().attr( 'aria-expanded', 'collapsed' !== state );

    meta-box-conditional-logic/js/conditional-logic.js : line 381

    function guessSelector(fieldName, selectorCache) {
        if (compare(fieldName, '(', 'contains')) {
            return '';
        if (!selectorCache) {
            selectorCache = globalSelectorCache;
        if (isUserDefinedSelector(fieldName)) {
            return fieldName;
        //Added below line to check if scope is cloneable or not
        var cloneable = $(selectorCache.$scope).hasClass('rwmb-clone');
        var selectors = [
            '#' + fieldName,
            '[name="' + fieldName + '"]',
            '[name^="' + fieldName + '"]',
            '[name*="' + fieldName + '"]'
        //Added below condition to prepend the exact name attribute to the selectors array
        if (cloneable) {
            $.each(selectors, function (index, pattern) {
                var tempSelector = selectorCache.get(pattern);
                if (tempSelector.length > 0) {
                    selectors.unshift('[name="' + tempSelector.attr('name') + '"]');
        var selector = _.find(selectors, function (pattern) {
            return selectorCache.get(pattern).length > 0;
        return selector ? selector : '';

    meta-box-conditional-logic/js/conditional-logic.js : line 529

    // Listening eventSource apply conditional logic when eventSource is change.
    if (watchedElements.length > 1) {
        //Added the following loop, to run the coniditional logic on initialization
        $.each(watchedElements.split(','), function(){
            var $scope = getFieldScope($(this));
        $document.on('change keyup', watchedElements, function () {
            var $scope = getFieldScope($(this));
    Anh Tran


    Thanks a lot for your solution.

    However, I’m quite confused here. When a group is collapsed, then all sub-fields are hidden, are they? So it doesn’t matter they’re visible or hidden, because they’re always hidden.


    Yes when a group is collapsed all the subfields are hidden.

    But when I integrated a conditional logic on the subfields, if that logic was being satisfied the subfields were being shown even when the group was collapsed.

    Anh Tran

    Can you show me a screenshot? In my thought, when a group is collapsed, all sub-fields are hidden. So no matter the condition is satisfied or not, we still can’t see the sub-fields.


    Screenshot below:

    Sub fields rendering when group is collapsed


    The issue seems to be caused when updating the post with the sub-group collapsed. On load then it sets the sub-group as collapsed but still shows its subfields without taking into consideration the state of the sub-group

    This is how it should be rendered when collapsed:
    collapsed group

    This is how it should be rendered when expanded:
    Expanded Group

    Anh Tran


    We were able to see the bugs. But when apply the fix, we see that only the code in group.js is needed. We’re not very clear about the added code in conditional-logic.js that you provided. Is that needed?


    I had to implement the code in conditional-logic.js in order to have the functionality work well on fields which were already set before doing the update in group.js

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