[WEB-495] chore: issue title improvement

web/components/issues/title-input.tsx

@@ -19,27 +19,52 @@ export type IssueTitleInputProps = {
 };
 
 export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
-  const { disabled, value, workspaceSlug, setIsSubmitting, issueId, issueOperations, projectId } = props;
+  const { disabled, value, workspaceSlug, isSubmitting, setIsSubmitting, issueId, issueOperations, projectId } = props;
   // states
   const [title, setTitle] = useState("");
   // hooks
-
   const debouncedValue = useDebounce(title, 1500);
 
   useEffect(() => {
     if (value) setTitle(value);
   }, [value]);
 
   useEffect(() => {
+    const textarea = document.querySelector("#title-input");
     if (debouncedValue && debouncedValue !== value) {
       issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }, false).finally(() => {
         setIsSubmitting("saved");
+        if (textarea && !textarea.matches(":focus")) {
+          const trimmedTitle = debouncedValue.trim();
+          if (trimmedTitle !== title) setTitle(trimmedTitle);
+        }
       });
     }
     // DO NOT Add more dependencies here. It will cause multiple requests to be sent.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue]);
 
+  useEffect(() => {
+    const handleBlur = () => {
+      const trimmedTitle = title.trim();
+      if (trimmedTitle !== title && isSubmitting !== "submitting") {
+        setTitle(trimmedTitle);
+        setIsSubmitting("submitting");
+      }
+    };
+
+    const textarea = document.querySelector("#title-input"); // You might need to change this selector according to your TextArea component
+    if (textarea) {
+      textarea.addEventListener("blur", handleBlur);
+    }
+
+    return () => {
+      if (textarea) {
+        textarea.removeEventListener("blur", handleBlur);
+      }
+    };
+  }, [title, isSubmitting, setIsSubmitting]);
+
   const handleTitleChange = useCallback(
     (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setIsSubmitting("submitting");
@@ -53,6 +78,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
   return (
     <div className="relative">
       <TextArea
+        id="title-input"
         className={`min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary ${
           title?.length === 0 ? "!ring-red-400" : ""
         }`}