Custom Fields
Re-Envisioned
Support Meta Box Conditional Logic Conditional Logic and Group extensions

This topic contains 8 replies, has 2 voices, and was last updated by  accounts@niu.com.mt 4 months, 1 week ago.

  • Creator
    Topic
  • #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:

    https://ghostbin.com/paste/k269j

Viewing 8 replies - 1 through 8 (of 8 total)
  • Author
    Replies
  • #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,
            '#' + 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));
            runConditionalLogic($scope);
        });
        $document.on('change keyup', watchedElements, function () {
            var $scope = getFieldScope($(this));
            runConditionalLogic($scope);
        });
    }
    
    #12155

    Anh Tran
    Keymaster

    Hello,

    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.

    #12159

    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.

    #12176

    Anh Tran
    Keymaster

    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.

    #12293

    Screenshot below:

    Sub fields rendering when group is collapsed

    #12294

    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

    #12913

    Anh Tran
    Keymaster

    Hi,

    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?

    #12974

    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.