fix: Leaving editable tab in error state (#37981)

appsmithorg · Dec 6, 2024 · a450226 · a450226
1 parent ba7c158
commit a450226
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/app/client/src/IDE/Components/EditableName/EditableName.test.tsx b/app/client/src/IDE/Components/EditableName/EditableName.test.tsx
@@ -151,7 +151,7 @@ describe("EditableName", () => {
 
       await userEvent.click(document.body);
 
-      expect(getByRole("tooltip").textContent).toEqual(validationError);
+      expect(getByRole("tooltip").textContent).toEqual("");
 
       expect(exitEditing).toHaveBeenCalled();
       expect(onNameSave).not.toHaveBeenCalledWith(invalidTitle);
@@ -187,7 +187,7 @@ describe("EditableName", () => {
       });
 
       fireEvent.focusOut(inputElement);
-      expect(getByRole("tooltip").textContent).toEqual(validationError);
+      expect(getByRole("tooltip").textContent).toEqual("");
       expect(exitEditing).toHaveBeenCalled();
       expect(onNameSave).not.toHaveBeenCalledWith(invalidTitle);
     });

diff --git a/app/client/src/IDE/Components/EditableName/EditableName.tsx b/app/client/src/IDE/Components/EditableName/EditableName.tsx
@@ -5,10 +5,11 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Spinner, Text, Tooltip } from "@appsmith/ads";
+import { Spinner, Text as ADSText, Tooltip } from "@appsmith/ads";
 import { useEventCallback, useEventListener } from "usehooks-ts";
 import { usePrevious } from "@mantine/hooks";
 import { useNameEditor } from "./useNameEditor";
+import styled from "styled-components";
 
 interface EditableTextProps {
   name: string;
@@ -29,6 +30,10 @@ interface EditableTextProps {
   inputTestId?: string;
 }
 
+export const Text = styled(ADSText)`
+  min-width: 3ch;
+`;
+
 export const EditableName = ({
   exitEditing,
   icon,
@@ -72,10 +77,15 @@ export const EditableName = ({
     const nameError = validate(editableName);
 
     if (editableName === name) {
+      // No change detected
       exitWithoutSaving();
     } else if (nameError === null) {
+      // Save the new name
       exitEditing();
       onNameSave(editableName);
+    } else {
+      // Exit edit mode and revert name
+      exitWithoutSaving();
     }
   }, [
     editableName,
@@ -119,7 +129,9 @@ export const EditableName = ({
   useEventListener(
     "focusout",
     function handleFocusOut() {
-      if (isEditing) {
+      const input = inputRef.current;
+
+      if (input) {
         attemptSave();
       }
     },