ListGroup won't toggle open state on custom PropertiesPanel groups when using with form-js

[maximryzhov]

Describe the Bug

Use case: user wants to add a ListGroup component to the PropertiesPanel for a custom form-js widget, similar to Custom Properties, Static Options or Header Items in order to add a dynamic list of custom entries.

Outcome: it is possible to add a ListGroup, but the item list can't be opened. The 'bio-properties-panel-list' div never receives the 'open' CSS class. It is possible, however to add 'open' class to the div in the browser 'Elements' tab and see the list contents, add or remove list items. But still it won't toggle back to the closed state.

Note: the isssue doesn't occur when using Properties Panel with bpmn-js editor.

Steps to Reproduce

Please refer to this repo
https://github.com/maximryzhov/form-js-properties-panel-listgroup-bug
git clone, run npm install and run npm run start. I am using a slightly modified version of Range component from form-js-examples repo.

Expected Behavior

User can add a ListGroup component to the PropertiesPanel. When clicked on the component header or on the chevron icon, the list is expected to expand and show the list of the items.

Environment

• Host (Browser/Node version), if applicable: MS Edge 123.0.2420.97
• OS: Windows 11
• properties-panel version: 3.18.2
• form-js verstion: 1.8.3