Support Forum
Support › Meta Box Conditional Logic › Conditional Logic and Group extensions
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:
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);
});
}
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.
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.
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:
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:
This is how it should be rendered when expanded:
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?
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