Not 100% sure, but I think it has to do how the editor (CodeMirror) automatically adjusts it’s size to accommodate things like line numbers and custom scrollbars within the editor. When the editor is hidden via display: none; as ACF does with conditional logic, the editor technically has no height, so CodeMirror adjusts itself for a height of 0px.
I came up with a bit of a workaround. It’s not pretty and I’m not gonna promise it’ll work in all situations (or forever), but seems to work for me for what I need.
You’ll need add some JS to the backend. You can do that by editing the plugin (I’d recommend forking it), adding it to your theme or via a plugin.
function refreshEditors(i) {
var ACFPostbox = $(i).parents('.acf_postbox');
ACFPostbox.find('.field_type-code_area.acf-conditional_logic-show').each(function(){
$('.CodeMirror').each(function(i, el){
el.CodeMirror.refresh();
});
});
}
$('.acf_postbox').delegate('.field_type-true_false input, .field_type-checkbox input, .field_type-radio input', 'click', function(){
refreshEditors(this)
});
$('.acf_postbox').delegate('.field_type-select select', 'change blur', function(){
refreshEditors(this)
});
This basically just waits for clicks on checkboxes, radio buttons and select inputs, then triggers a refresh for any instances of the code editor, within the same field group, that have conditional logic on them.
If you edit the plugin, I’d recommend you fork it so your changes aren’t wiped out by a future update. The JS that spawns the editor is around line 167 of acf_code_area-v4.php, so you probably want to add it after that (line 175 or so).
