Hello,
I would like to report a potential issue that I encountered after upgrading dhtmlxDiagram from v6.0.11 to v6.1.1.
Summary
After the upgrade, the behavior of the Delete / Backspace keys during inline text editing (e.g., lineTitle) has changed unexpectedly.
Steps to reproduce
- Use dhtmlxDiagram v6.1.1
- Double-click a
lineTitle(or similar editable element) to enter text edit mode - Place the cursor inside the text
- Press Delete or Backspace
Actual behavior
- The entire diagram item (e.g., the line or shape) is removed
Expected behavior
- Only the text content (
item.text) should be modified/deleted - This was the behavior in v6.0.11
Additional context
It seems this behavior is related to the hotkey changes introduced in v6.1.1:
Workaround
I implemented a workaround by overriding the hotkeys and checking whether the text editor is active before removing the item:
https://snippet.dhtmlx.com/tqj53q3z
const editor = new dhx.DiagramEditor(document.body, {
type: "default",
hotkeys: {
'delete': () => checkRemoveItem(),
'backspace': () => checkRemoveItem(),
}
});
const checkRemoveItem = () => {
const target = ["lineTitle", "circle"];
const selected = editor.diagram.selection.getItem();
if (selected !== undefined) {
if (target.includes(selected.type)) {
const element = document.querySelector(
`[dhx_editor_id="${selected.id}_editor"]`
);
if (element && element.contains(document.activeElement)) {
// editing text → do nothing
} else {
editor.diagram.data.remove(selected.id);
}
} else {
editor.diagram.data.remove(selected.id);
}
}
};
Question
- Is this change in behavior intentional?
- If so, is there an official way to distinguish between “text editing mode” and “item selection mode” when handling hotkeys?
Thank you for your support.