Escape closes code editing window without asking and without saving changes

[tsdaemon]

Bug Description

When I open Edit Code modal, it can be closed by accidentally pressing Esc, and there is no prompt to save changes or anything to prevent loosing changes. And I use Esc in IDEs to close intellisense suggestions, so its super inconvenient that it closes the modal.

Reproduction

1. Start a flow
2. Create custom component
3. Start editing code, make some changes
4. Press Esc

Expected behavior

Changes are either preserved, or Esc does not close the modal, or there is a prompt asking if I want to save changes before closing.

Who can help?

No response

Operating System

Ubuntu

Langflow Version

1.0.14

Python Version

None

Screenshot

No response

Flow File

No response

[dosubot]

Hey @tsdaemon! 👋 I'm here to help you with any bugs, questions, or contributions you have for the repository. Let me know how I can assist you!

To address the issue where the Edit Code modal in Langflow version 1.0.14 on Ubuntu closes without saving changes when the Esc key is pressed, you can modify the modal's behavior to prevent the default action of the Esc key. This can be done by adding an event listener to handle the Escape key press and prevent the default behavior.

Here is the relevant part of the code that handles this:

const handlePreventEsc = (e: React.KeyboardEvent) => {
  if (e.key === "Escape") {
    e.preventDefault();
  }
};

return (
  <div onKeyDown={(e) => handlePreventEsc(e)}>
    <BaseModal open={open} setOpen={setOpen}>
      <BaseModal.Trigger>{children}</BaseModal.Trigger>
      <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
        <span className="pr-2"> {EDIT_CODE_TITLE} </span>
        <IconComponent
          name="prompts"
          className="h-6 w-6 pl-1 text-primary "
          aria-hidden="true"
        />
      </BaseModal.Header>
      <BaseModal.Content>
        <Input
          value={code}
          readOnly
          className="absolute left-[500%] top-[500%]"
          id="codeValue"
        />
        <div className="flex h-full w-full flex-col transition-all">
          <div className="h-full w-full">
            <AceEditor
              readOnly={readonly}
              value={code}
              mode="python"
              setOptions={{ fontFamily: "monospace" }}
              height={height ?? "100%"}
              highlightActiveLine={true}
              showPrintMargin={false}
              fontSize={14}
              showGutter
              enableLiveAutocompletion
              theme={dark ? "twilight" : "github"}
              name="CodeEditor"
              onChange={(value) => {
                setCode(value);
              }}
              className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
            />
          </div>
          <div
            className={
              "whitespace-break-spaces transition-all delay-500" +
              (error?.detail?.error !== undefined ? "h-2/6" : "h-0")
            }
          >
            <div className="mt-1 h-full max-h-[10rem] w-full overflow-y-auto overflow-x-clip text-left custom-scroll">
              <h1 className="text-lg text-destructive">
                {error?.detail?.error}
              </h1>
              <div className="ml-2 w-full text-sm text-status-red word-break-break-word">
                <span className="w-full word-break-break-word">
                  {error?.detail?.traceback}
                </span>
              </div>
            </div>
          </div>
          <div className="flex h-fit w-full justify-end">
            <Button
              className="mt-3"
              onClick={handleClick}
              type="submit"
              id="checkAndSaveBtn"
              disabled={readonly}
            >
              Check & Save
            </Button>
          </div>
        </div>
      </BaseModal.Content>
    </BaseModal>
  </div>
);

This code ensures that when the Escape key is pressed, the default behavior (which would typically close the modal) is prevented ^[1].

To continue talking to Dosu, mention @dosu.

[carlosrcoelho]

Fixed:
#3232