JS broken when d&d nested complex fields that contain elements with conditional logic

[zessx]

Version

• Carbon Fields: 3.1.6 (latest)
• WordPress: 5.2.4 (latest)
• PHP: 7.2.1
  ​

Expected Behavior

We should be able to drag and drop nested complex fields that contain elements with conditional logic.

⚠️
It may be related to #655 but is a separated issue, as #655 has been fixed in 3.1.6

​

Actual Behavior

When a complex field inside another complex field contains some elements with conditional logic, the whole page can break when you're moving this field.
​

Container definition

Container::make('post_meta', 'Custom Data')
    ->where('post_type', '=', 'page')
    ->add_fields(array(
        Field::make('complex', 'crb_complex', 'Complex field')
            ->add_fields(array(
                Field::make('complex', 'crb_complex_sub', 'Complex sub-field')
                    ->add_fields(array(
                        Field::make('checkbox', 'crb_show_content', 'Show content'),
                        Field::make('rich_text', 'crb_content', 'Content')
                            ->set_conditional_logic(array(array(
                                'field' => 'crb_show_content',
                                'value' => true
                            )))
                    ))
            ))
    ));

​

Steps to Reproduce the Problem

1. Create the container above (with nested complex)
2. Add 2 "Complex field" and 1 "Complex sub-field" in the first of them (see picture below)
3. Move the n°2 "Complex field" above the n°1

You should now see that:

• The now n°1 "Complex field" (previously n°2) is collapsed
• You cannot expand it
• The following error showed up in the console:

Uncaught TypeError: Cannot read property ‘fields’ of undefined
   at z (metaboxes.min.js?ver=3.1.6:1)
   at metaboxes.min.js?ver=3.1.6:1
   at core.min.js?ver=3.1.6:10
   at Object.next (vendor.min.js?ver=3.1.6:57)
   at vendor.min.js?ver=3.1.6:57
   at metaboxes.min.js?ver=3.1.6:1
   at vendor.min.js?ver=3.1.6:57
   at core.min.js?ver=3.1.6:10
   at vendor.min.js?ver=3.1.6:57
   at Array.forEach (<anonymous>)
z @ metaboxes.min.js?ver=3.1.6:1
(anonymous) @ metaboxes.min.js?ver=3.1.6:1
(anonymous) @ core.min.js?ver=3.1.6:10
(anonymous) @ vendor.min.js?ver=3.1.6:57
(anonymous) @ vendor.min.js?ver=3.1.6:57
(anonymous) @ metaboxes.min.js?ver=3.1.6:1
(anonymous) @ vendor.min.js?ver=3.1.6:57
(anonymous) @ core.min.js?ver=3.1.6:10
(anonymous) @ vendor.min.js?ver=3.1.6:57
r @ vendor.min.js?ver=3.1.6:57
(anonymous) @ vendor.min.js?ver=3.1.6:57
p @ vendor.min.js?ver=3.1.6:57
(anonymous) @ vendor.min.js?ver=3.1.6:57
(anonymous) @ vendor.min.js?ver=3.1.6:57
(anonymous) @ vendor.min.js?ver=3.1.6:57
value @ vendor.min.js?ver=3.1.6:57
e.<computed> @ vendor.min.js?ver=3.1.6:57
e.<computed> @ vendor.min.js?ver=3.1.6:57
(anonymous) @ core.min.js?ver=3.1.6:1
(anonymous) @ core.min.js?ver=3.1.6:1
_trigger @ widget.min.js?ver=1.11.4:11
_trigger @ sortable.min.js?ver=1.11.4:11
(anonymous) @ widget.min.js?ver=1.11.4:11
(anonymous) @ sortable.min.js?ver=1.11.4:11
_clear @ sortable.min.js?ver=1.11.4:11
(anonymous) @ widget.min.js?ver=1.11.4:11
_mouseStop @ sortable.min.js?ver=1.11.4:11
(anonymous) @ widget.min.js?ver=1.11.4:11
_mouseUp @ mouse.min.js?ver=1.11.4:11
(anonymous) @ widget.min.js?ver=1.11.4:11
_mouseDistanceMet._mouseDelayMet._mouseUpDelegate @ mouse.min.js?ver=1.11.4:11
dispatch @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,moxiejs,plupload&ver=5.2.4:3
r.handle @ load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,moxiejs,plupload&ver=5.2.4:3
Show 3 more frames

​

Comments

It seems the error come from the following file (packages/metaboxes/hocs/with-conditional-logic/index.js), and that Carbon Fields is lots in nested complex fields:
​

/**
 * The function that provides the data that needs to be
 * evaluated by conditional logic.
 *
 * @param  {Object} props
 * @param  {Object} fields
 * @return {Object}
 */
function output( props, fields ) {
    fields = keyBy( fields, 'id' );	

    const container = select( 'carbon-fields/metaboxes' ).getContainerById( props.containerId );
    const isTopLevelField = some( container.fields, [ 'id', props.id ] );
    let siblingFields = [];
    // …	

    if ( isNestedComplex ) {
        const groupField = find( get( fields, pathPrefix ), [ 'name', chunk ] );
        pathPrefix = `${ groupField.id }.value`;​
        depth--;
    }
    // …	
}

Additional Container definitions that do NOT raise any error

With nested complex fields, but without conditional logic:

Container::make('post_meta', 'Custom Data')
    ->where('post_type', '=', 'page')
    ->add_fields(array(
        Field::make('complex', 'crb_complex', 'Complex field')
            ->add_fields(array(
                Field::make('complex', 'crb_complex_sub', 'Complex sub-field')
                    ->add_fields(array(
                        Field::make('checkbox', 'crb_show_content', 'Show content'),
                        Field::make('rich_text', 'crb_content', 'Content')
                    ))
            ))
    ));

Without nested complex fields, but with conditional logic:

Container::make('post_meta', 'Custom Data')
    ->where('post_type', '=', 'page')
    ->add_fields(array(
        Field::make('complex', 'crb_complex', 'Complex field')
            ->add_fields(array(
                Field::make('checkbox', 'crb_show_content', 'Show content'),
                Field::make('rich_text', 'crb_content', 'Content')
                    ->set_conditional_logic(array(array(
                        'field' => 'crb_show_content',
                        'value' => true
                    )))
            ))
    ));

[vvasilev-]

Hi @zessx,

Thanks for the bug report, the fix for this issue is released in v3.1.8.

[zessx]

Thanks @vvasilev- we'll check this update in the evening.

[prosvitco]

@vvasilev- also have the same issue and 3.1.8 update did not help -

vendor.min.js?ver=3.1.8:49 TypeError: Cannot read property 'fields' of undefined
at H (metaboxes.min.js?ver=3.1.8:1)
at metaboxes.min.js?ver=3.1.8:1
at core.min.js?ver=3.1.8:10
at Object.next (vendor.min.js?ver=3.1.8:57)
at vendor.min.js?ver=3.1.8:57
at metaboxes.min.js?ver=3.1.8:1
at metaboxes.min.js?ver=3.1.8:1
at vendor.min.js?ver=3.1.8:57
at core.min.js?ver=3.1.8:10
at vendor.min.js?ver=3.1.8:57

[zessx]

⚠️ Issue was fixed with double nesting, but remains if you're using triple nesting (complex in a complex in a complex).