[BUG] FormioUtils.eachComponent not working for Panel with nested Columns components

Environment

Please provide as many details as you can:

• Hosting type
  • [] Form.io
  • [ x] Local deployment
    • Version:
• Formio.js version: v4.12.4
• Frontend framework: Vanilla JS
• Browser: Edge (Chromium)
• Browser version: Version 88.0.705.50 (Official build) (64-bit)

Steps to Reproduce

Create a schema with Collapsible Panel that with -> Columns split in 2 columns with widths 2 and 10 -> in the second column(the one with width 10) add another Columns component that I split in 4 columns with width 3 each

FormioUtils.getComponent and FormioUtils.searchComponents failed to get the textfield components that’s inside the second Columns component and this is because FormioUtils.eachComponent fails to find the salutation component.

Expected behavior

Ability to find all textfield components with FormioUtils.searchComponents

Observed behavior

In my scenario the following methods in FormUtils are not working correctly, except form.GetComponent

// !!!FAIL!!! does not return the component inside the second Columns component
let flattenComponents = FormioUtils.flattenComponents(form.components, true);
console.log("flattenComponents", flattenComponents);

// !!!FAIL!!! to return the salutation component
let component = FormioUtils.getComponent(form.components, 'salutation', true);
console.log("getComponent", component);

// !!!FAIL!!! to find any text field component                
let components = FormioUtils.searchComponents(form.components, {
  'type': 'textfield'
});                                
console.log("searchComponents", components);
    
// !!!FAIL!!! finds the 'salutation' component twice             
FormioUtils.findComponent(form.components, 'salutation', null, function (component, newPath, components){
    let id = component.id;   
    console.log("findComponent", component);
});
                
// WORKS :)  the only one that works is form.getComponent;                
let salutation = form.getComponent('salutation');

Example

I’ve created a sandbox: 601319c98aa7c24a94dd1b00 Also attached a the same schema as text file schema.txt

[travist]

Yep, sounds like a bug that needs investigation. We will take a look.

[mp3three]

In the case of searchComponents, here is a type definition:

type searchComponents = (componentList: FormComponent[], query: string): FormComponent[];

This line here is specifically where the query argument is being used: https://github.com/formio/formio.js/blob/bf486692a652fe1747f9cbf4dd4e68bc3e35d1bd/src/utils/formUtils.js#L128

In the case of the code above, you are passing an object instead of a string, so my expectation would be no results should be returned. An object cannot be compared against another object for equality in this fashion.

---

The other calls you have above require more replication / investigation work