fix: update on import done

CHANGELOG.md

@@ -6,6 +6,10 @@ All notable changes to [dmn-js-properties-panel](https://github.com/bpmn-io/dmn-
 
 ___Note:__ Yet to be released changes appear here._
 
+## 3.8.3
+
+* `FIX`: update on `import.done` instead of `root.added` to prevent stale element ([#128](https://github.com/bpmn-io/dmn-js-properties-panel/pull/128))
+
 ## 3.8.2
 
 * `FIX`: reverts keeping selected element in sync with canvas state ([#122](https://github.com/bpmn-io/dmn-js-properties-panel/pull/122))

src/render/DmnPropertiesPanel.js

@@ -123,24 +123,20 @@ export default function DmnPropertiesPanel(props) {
     };
   }, [ selectedElement ]);
 
-  // (2c) root element changed
+  // (2c) import done
   useEffect(() => {
-    const onRootAdded = (e) => {
-      const element = e.element;
-
-      if (isImplicitRoot(element)) {
-        return;
-      }
+    const onImportDone = () => {
+      const rootElement = canvas.getRootElement();
 
-      _update(element);
+      _update(rootElement);
     };
 
-    eventBus.on('root.added', onRootAdded);
+    eventBus.on('import.done', onImportDone);
 
     return () => {
-      eventBus.off('root.added', onRootAdded);
+      eventBus.off('import.done', onImportDone);
     };
-  }, [ selectedElement ]);
+  }, []);
 
   // (2d) provided entries changed
   useEffect(() => {

test/spec/DmnPropertiesPanel.spec.js

@@ -244,29 +244,6 @@ describe('<DmnPropertiesPanel>', function() {
     });
 
 
-    it('should not update on implicit root added',function() {
-
-      // given
-      const updateSpy = sinon.spy();
-
-      const eventBus = new eventBusMock();
-
-      eventBus.on('propertiesPanel.updated', updateSpy);
-
-      createDmnPropertiesPanel({ container, eventBus });
-
-      // when
-      eventBus.fire('root.added', {
-        element: {
-          isImplicit: true
-        }
-      });
-
-      // expect
-      expect(updateSpy).to.not.have.been.called;
-    });
-
-
     it('should not update on implicit root selected',function() {
 
       // given
@@ -401,16 +378,24 @@ function createDmnPropertiesPanel(options = {}) {
   } = options;
 
   let {
+    canvas,
     elementRegistry
   } = options;
 
+  if (!canvas) {
+    canvas = {
+      getRootElement: () => noopElement
+    };
+  }
+
   if (!elementRegistry) {
     elementRegistry = new elementRegistryMock();
     elementRegistry.setElements([ element ]);
   }
 
   const injector = new injectorMock({
     ...options,
+    canvas,
     elementRegistry
   });
 

test/spec/mocks/index.js

@@ -60,7 +60,7 @@ export class Injector {
     }
 
     if (type === 'canvas') {
-      return new Canvas();
+      return this._options.canvas || new Canvas();
     }
   }
 }