Hi Team!
It often happens that we bind all kinds of dynamic events to the elements in the form, and their behavior can depend on each other's values. Our users insist on providing shortcut keys to access the [Save] and [Create] buttons, e.g. [Ctrl Enter]. We have created several JS solutions, but basically the problem with all of them is that we cannot tell whether the change / other event handlers of the input field or additional items dependent on the input field have run.
this is a working solution, but it is uncertain due to the timeout:
document.addEventListener("keydown", function(event) {
if (event.ctrlKey && event.key === "Enter") {
event.preventDefault();
const active = document.activeElement;
if (!active || !["INPUT", "TEXTAREA"].includes(active.tagName)) return;
active.addEventListener("blur", () => {
setTimeout(() => {
const buttons = document.querySelectorAll("#saveButton, #createButton");
const visibleBtn = Array.from(buttons).find(btn => btn.offsetParent !== null);
if (visibleBtn) {
visibleBtn.click();
}
}, 200); // <---- timeout value
}, { once: true });
active.blur();
}
});
It would be nice to have some JS support that clearly tells us whether we still need to wait for the DA-s to run.
Thanks
Z.