Fire update on other element without losing Textbox-focus

Developers
1

This topic is a result of this post.

I am trying to fire an update on an element, as the data in this element depends on data of an attribute from another element.

Default way: an element needs to be reselected for it to fire the update on all underlying elements.
I edited PropertiesPanel.js so it updates the ExtensionElements in a StartEvent when another attribute of this StartEvent has its value changed.

    eventBus.on('elements.changed', function(e) {

    var current = self._current;
    var element = current && current.element;

    if (element) {
        if (e.elements.indexOf(element) !== -1) {
            if (element.businessObject.$type === "bpmn:StartEvent") {
                self.update(element.businessObject.extensionElements);
            }
            self.update(element);

        }
    }
});

It actually works okay, the values are updated correctly. The only problem is that the update-event triggers when you stop typing for a split second. When this is triggered, the textfield which had the typing focus, loses this focus.

This means that typing in the textbox is interrupted, and it needs to be reselected repeatedly in order to type the complete value.

How can i solve this? The update works fine, i just need to keep the textbox focussed.
cheers

2

Solved it, for people with the same issue:

eventBus.on('elements.changed', function(e) {

    var current = self._current;
    var element = current && current.element;

    var objectChanged = false;
    if (element) {
        if (e.elements.indexOf(element) !== -1) {
            if (element.businessObject.$type === "bpmn:StartEvent") {
                objectChanged = current.entries.Object.oldValues.Object !== element.businessObject.Object;
                if (objectChanged) {
                    self.update(element.businessObject.extensionElements);
                }
            }
            self.update(element);
            if (objectChanged) {
                placeCaretAtEnd(document.getElementById("camunda-Object"));
            }

        }
    }
});

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined" &&
        typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}