Complete direct editing when moving focus outside of the canvas

[ov-developer]

Describe the Bug

If you are editing an element (Task, Label, does not matter) and you click outside the canvas, the editor is stuck in a state somewhere in-between. The internal Shape data is not being updated as you are still in the state of editing, altough it is not visible.

Steps to Reproduce

• Go to https://demo.bpmn.io/new
• Create a new diagram
• Insert a task and start editing its title
• Click on the "Download as SVG image" button in the bottom toolbar while the editing is still active

You will see that the generated SVG does not have the title that you just entered:

Editing

Downloaded SVG

In our use case we are triggering an auto-save if the diagram changes. We also auto-save if our user closes the editor dialog (via a close button in a header toolbar outside the canvas) and there are changes. But there are no actual changes in the BPMN data as the editing is not being recognized as completed.

Expected Behavior

Update the internal data and close the editing state if the shape / entire canvas loses focus.

[nikku]

This is today, indeed, handled within the canvas only. You made a good argument for the change to be part of the direct editing core. We already handle escape there, we should handle BLUR (to submit) there, too.

We have to ensure we don't break existing use-cases (resize during editing) in the process:

[nikku]

I investigated this in a time-boxed manner. While complete on blur is easy to implement in the direct editing helper (bpmn-io/diagram-js-direct-editing#54) the integration into bpmn-js seems to not be as straight forward: After interating I see weird drag interactions starting on blur.

So unfortunately this needs more investigation. Moving to backlog, attaching spring cleaning.