Properties panel updated with stale element #1131
Description
Describe the Bug
selectedElement becomes local state after the inital render. It is then updated not when the prop changes but only when a selection.changed event is fired. When receiving a elementTemplates.changed event the properties panel is updated with the current selectedElement. The properties panel will display the stale element. Furthermore, when firing this event immediately after an import selectedElement will be stale. When the ID is checked for uniqueness and the ID of the selected element hasn't changed between imports the check const idAlreadyExists = assigned && assigned !== element; will return false since the assigned element is the stale element. The result is this error:
Here's a full reproduction:
This issue is the root cause of https://github.com/camunda/web-modeler/issues/12388.
Steps to Reproduce
This code reproduces the issue:
await modeler.importXML(xml);
setTimeout(async () => {
await modeler.importXML(xml);
modeler.get('eventBus').fire('elementTemplates.changed');
}, 5000);
Branch: https://github.com/bpmn-io/bpmn-js-properties-panel/tree/1131-stale-element-tmp
Adding a timeout prevents the issue but is not the right fix:
await modeler.importXML(xml);
setTimeout(async () => {
await modeler.importXML(xml);
setTimeout(() => {
modeler.get('eventBus').fire('elementTemplates.changed');
}, 1000);
}, 5000);Adding this code to the properties panel prevents the issue from happening but might not be the right fix:
useEffect(() => {
eventBus.on('import.done', () => {
const rootElement = canvas.getRootElement();
_update(rootElement);
});
}, []);Expected Behavior
After an import the properties panel isn't updated with a stale element.
Environment
- Library version: 5.35.0