snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/issues/title-input.tsx

@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { observer } from "mobx-react";
+import { Field } from "@makeplane/propel/components/field";
+import { TextArea } from "@makeplane/propel/components/text-area";
+import { useTranslation } from "@plane/i18n";
+import type { TNameDescriptionLoader } from "@plane/types";
+// types
+import { cn } from "@plane/utils";
+import useDebounce from "@/hooks/use-debounce";
+import type { TIssueOperations } from "./issue-detail";
+// hooks
+
+export type IssueTitleInputProps = {
+  disabled?: boolean;
+  value: string | undefined | null;
+  workspaceSlug: string;
+  isSubmitting: TNameDescriptionLoader;
+  setIsSubmitting: (value: TNameDescriptionLoader) => void;
+  issueOperations: TIssueOperations;
+  projectId: string;
+  issueId: string;
+  containerClassName?: string;
+};
+
+export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTitleInputProps) {
+  const {
+    disabled,
+    value,
+    workspaceSlug,
+    isSubmitting,
+    setIsSubmitting,
+    issueId,
+    issueOperations,
+    projectId,
+    containerClassName,
+  } = props;
+  const { t } = useTranslation();
+  // states
+  const [title, setTitle] = useState(value || "");
+  const [isLengthVisible, setIsLengthVisible] = useState(false);
+  // ref to track if there are unsaved changes
+  const hasUnsavedChanges = useRef(false);
+  // ref to store current title value for cleanup function
+  const currentTitleRef = useRef(title);
+  // hooks
+  const debouncedValue = useDebounce(title, 1500);
+
+  useEffect(() => {
+    if (value) {
+      setTitle(value);
+      currentTitleRef.current = value;
+      // Reset unsaved changes flag when value is set from props
+      hasUnsavedChanges.current = false;
+    }
+  }, [value]);
+
+  useEffect(() => {
+    const textarea = document.querySelector("#title-input");
+    if (debouncedValue && debouncedValue !== value) {
+      if (debouncedValue.trim().length > 0) {
+        issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }).finally(() => {
+          setIsSubmitting("saved");
+          hasUnsavedChanges.current = false;
+          if (textarea && !textarea.matches(":focus")) {
+            const trimmedTitle = debouncedValue.trim();
+            if (trimmedTitle !== title) setTitle(trimmedTitle);
+          }
+        });
+      } else {
+        setTitle(value || "");
+        setIsSubmitting("saved");
+        hasUnsavedChanges.current = false;
+      }
+    }
+    // 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") {
+        if (trimmedTitle.length > 0) {
+          setTitle(trimmedTitle);
+          setIsSubmitting("submitting");
+          hasUnsavedChanges.current = true;
+        } else {
+          setTitle(value || "");
+          setIsSubmitting("saved");
+          hasUnsavedChanges.current = false;
+        }
+      }
+    };
+
+    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]);
+
+  // Save on unmount if there are unsaved changes
+  useEffect(
+    () => () => {
+      if (hasUnsavedChanges.current && currentTitleRef.current.trim().length > 0) {
+        issueOperations
+          .update(workspaceSlug, projectId, issueId, { name: currentTitleRef.current.trim() })
+          .catch((error) => {
+            console.error("Failed to save title on unmount:", error);
+          })
+          .finally(() => {
+            setIsSubmitting("saved");
+            hasUnsavedChanges.current = false;
+          });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const handleTitleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+      setIsSubmitting("submitting");
+      const titleFromEvent = e.target.value;
+      setTitle(titleFromEvent);
+      currentTitleRef.current = titleFromEvent;
+      hasUnsavedChanges.current = true;
+    },
+    [setIsSubmitting]
+  );
+
+  if (disabled) return <div className="text-20 font-medium whitespace-pre-line">{title}</div>;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className={cn("relative", containerClassName)}>
+        <Field name="title" invalid={title?.length === 0}>
+          <div className="flex w-full">
+            <TextArea
+              size="2xl"
+              surface="inline"
+              autoResize
+              rows={1}
+              id="title-input"
+              disabled={disabled}
+              value={title}
+              onChange={handleTitleChange}
+              maxLength={255}
+              placeholder={t("issue.title.label")}
+              onFocus={() => setIsLengthVisible(true)}
+              onBlur={() => setIsLengthVisible(false)}
+            />
+          </div>
+        </Field>
+        <div
+          className={cn(
+            "pointer-events-none absolute right-1 bottom-1 z-2 rounded-sm bg-surface-1 p-0.5 text-11 text-secondary opacity-0 transition-opacity",
+            {
+              "opacity-100": isLengthVisible,
+            }
+          )}
+        >
+          <span className={`${title.length === 0 || title.length > 255 ? "text-danger-primary" : ""}`}>
+            {title.length}
+          </span>
+          /255
+        </div>
+      </div>
+      {title?.length === 0 && (
+        <span className="text-13 font-medium text-danger-primary">{t("form.title.required")}</span>
+      )}
+    </div>
+  );
+});