fix: update dropdown on external change

Author: barmac

packages/dmn-js-drd/src/features/type-ref-dropdown/TypeRefDropdown.js

@@ -25,6 +25,8 @@ export default class TypeRefDropdown {
     this._modeling = modeling;
     this._translate = translate;
 
+    this._current = null;
+
     this._eventBus.on('selection.changed', (event) => {
 
       // clean up any existing overlays
@@ -38,22 +40,52 @@ export default class TypeRefDropdown {
         this.open(target);
       }
     });
+
+    this._eventBus.on('elements.changed', event => {
+      if (!this._current) {
+        return;
+      }
+
+      const { element } = this._current;
+
+      if (event.elements.includes(element)) {
+        this._update();
+      }
+    });
   }
 
   open(element) {
+    const container = this._getOverlayNode(element);
+    this._current = {
+      element,
+      container
+    };
+
     this._overlays.add(element, 'type-ref-dropdown', {
       position: {
         top: 60,
         left: 0
       },
-      html: this._getOverlayNode(element)
+      html: container
     });
   }
 
   close() {
+    this._current = null;
     this._overlays.remove({ type: 'type-ref-dropdown' });
   }
 
+  _update() {
+    if (!this._current) {
+      return;
+    }
+
+    const { element, container } = this._current;
+
+    const select = container.querySelector('select');
+    select.value = this._getTypeRef(element);
+  }
+
   _getOverlayNode(element) {
     const container = document.createElement('div');
     container.className = 'dms-type-ref-dropdown';

packages/dmn-js-drd/test/spec/features/type-ref-dropdown/TypeRefDropdownSpec.js

@@ -320,6 +320,45 @@ describe('features - type-ref-dropdown', function() {
   });
 
 
+  describe('external changes', function() {
+
+    it('should update select value on undo', inject(
+      function(elementRegistry, selection, commandStack) {
+
+        // given
+        const element = elementRegistry.get('withVariable_id');
+        selection.select(element);
+        triggerSelectChange(querySelect('withVariable_id'), 'number');
+
+        // when
+        commandStack.undo();
+
+        // then
+        expect(querySelect('withVariable_id').value).to.equal('boolean');
+      }
+    ));
+
+
+    it('should update select value on redo', inject(
+      function(elementRegistry, selection, commandStack) {
+
+        // given
+        const element = elementRegistry.get('withVariable_id');
+        selection.select(element);
+        triggerSelectChange(querySelect('withVariable_id'), 'number');
+        commandStack.undo();
+
+        // when
+        commandStack.redo();
+
+        // then
+        expect(querySelect('withVariable_id').value).to.equal('number');
+      }
+    ));
+
+  });
+
+
   // helpers //////////////
 
   function queryOverlay(elementId) {