From a19ff3a9b436624f8bb47173002ec5ec16ab4a3a Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 3 Sep 2025 17:57:03 +0530
Subject: [PATCH 1/6] chore: remove create label modal

---
 .../components/labels/create-label-modal.tsx  | 218 ------------------
 apps/web/core/components/labels/index.ts      |   1 -
 2 files changed, 219 deletions(-)
 delete mode 100644 apps/web/core/components/labels/create-label-modal.tsx

diff --git a/apps/web/core/components/labels/create-label-modal.tsx b/apps/web/core/components/labels/create-label-modal.tsx
deleted file mode 100644
index 413429c8a19..00000000000
--- a/apps/web/core/components/labels/create-label-modal.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-"use client";
-
-import React, { useEffect } from "react";
-import { observer } from "mobx-react";
-import { TwitterPicker } from "react-color";
-import { Controller, useForm } from "react-hook-form";
-import { ChevronDown } from "lucide-react";
-import { Dialog, Popover, Transition } from "@headlessui/react";
-// plane imports
-import { ETabIndices, LABEL_COLOR_OPTIONS, getRandomLabelColor } from "@plane/constants";
-// types
-import type { IIssueLabel, IState } from "@plane/types";
-// ui
-import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
-// helpers
-import { getTabIndex } from "@plane/utils";
-// hooks
-
-import { usePlatformOS } from "@/hooks/use-platform-os";
-
-// types
-type Props = {
-  createLabel: (data: Partial<IIssueLabel>) => Promise<IIssueLabel>;
-  handleClose: () => void;
-  isOpen: boolean;
-  onSuccess?: (response: IIssueLabel) => void;
-};
-
-const defaultValues: Partial<IState> = {
-  name: "",
-  color: "rgb(var(--color-text-200))",
-};
-
-export const CreateLabelModal: React.FC<Props> = observer((props) => {
-  const { createLabel, handleClose, isOpen, onSuccess } = props;
-  // store hooks
-  const { isMobile } = usePlatformOS();
-  // form info
-  const {
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    watch,
-    control,
-    reset,
-    setValue,
-    setFocus,
-  } = useForm<IIssueLabel>({
-    defaultValues,
-  });
-
-  const { getIndex } = getTabIndex(ETabIndices.CREATE_LABEL, isMobile);
-
-  /**
-   * For setting focus on name input
-   */
-  useEffect(() => {
-    setFocus("name");
-  }, [setFocus, isOpen]);
-
-  useEffect(() => {
-    if (isOpen) setValue("color", getRandomLabelColor());
-  }, [setValue, isOpen]);
-
-  const onClose = () => {
-    handleClose();
-    reset(defaultValues);
-  };
-
-  const onSubmit = async (formData: IIssueLabel) => {
-    await createLabel(formData)
-      .then((res) => {
-        onClose();
-        if (onSuccess) onSuccess(res);
-      })
-      .catch((error) => {
-        setToast({
-          title: "Error!",
-          type: TOAST_TYPE.ERROR,
-          message: error?.detail ?? "Something went wrong. Please try again later.",
-        });
-        reset(formData);
-      });
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={onClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 px-4 pb-4 pt-5 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <form
-                  onSubmit={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    handleSubmit(onSubmit)(e);
-                  }}
-                >
-                  <div>
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                      Create Label
-                    </Dialog.Title>
-                    <div className="mt-8 flex items-center gap-2">
-                      <Popover className="relative">
-                        {({ open, close }) => (
-                          <>
-                            <Popover.Button
-                              className={`group inline-flex items-center rounded-sm py-2 text-base font-medium hover:text-custom-text-100 focus:outline-none ${
-                                open ? "text-custom-text-100" : "text-custom-text-200"
-                              }`}
-                            >
-                              {watch("color") && watch("color") !== "" && (
-                                <span
-                                  className="ml-2 h-5 w-5 rounded"
-                                  style={{
-                                    backgroundColor: watch("color") ?? "black",
-                                  }}
-                                />
-                              )}
-                              <ChevronDown
-                                className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
-                                  open ? "text-gray-600" : "text-gray-400"
-                                }`}
-                                aria-hidden="true"
-                              />
-                            </Popover.Button>
-
-                            <Transition
-                              as={React.Fragment}
-                              enter="transition ease-out duration-200"
-                              enterFrom="opacity-0 translate-y-1"
-                              enterTo="opacity-100 translate-y-0"
-                              leave="transition ease-in duration-150"
-                              leaveFrom="opacity-100 translate-y-0"
-                              leaveTo="opacity-0 translate-y-1"
-                            >
-                              <Popover.Panel className="fixed left-5 z-50 mt-3 w-screen max-w-xs transform px-2 sm:px-0">
-                                <Controller
-                                  name="color"
-                                  control={control}
-                                  render={({ field: { value, onChange } }) => (
-                                    <TwitterPicker
-                                      color={value}
-                                      colors={LABEL_COLOR_OPTIONS}
-                                      onChange={(value) => {
-                                        onChange(value.hex);
-                                        close();
-                                      }}
-                                    />
-                                  )}
-                                />
-                              </Popover.Panel>
-                            </Transition>
-                          </>
-                        )}
-                      </Popover>
-                      <div className="flex w-full flex-col justify-center gap-0.5">
-                        <Controller
-                          control={control}
-                          name="name"
-                          rules={{
-                            required: "Label title is required",
-                          }}
-                          render={({ field: { value, onChange, ref } }) => (
-                            <Input
-                              id="name"
-                              name="name"
-                              type="text"
-                              value={value}
-                              onChange={onChange}
-                              ref={ref}
-                              tabIndex={getIndex("name")}
-                              hasError={Boolean(errors.name)}
-                              placeholder="Label title"
-                              className="w-full resize-none text-xl"
-                            />
-                          )}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                  <div className="mt-5 flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-                      {isSubmitting ? "Creating Label..." : "Create Label"}
-                    </Button>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-});
diff --git a/apps/web/core/components/labels/index.ts b/apps/web/core/components/labels/index.ts
index 9195f8649b2..7fe388345fd 100644
--- a/apps/web/core/components/labels/index.ts
+++ b/apps/web/core/components/labels/index.ts
@@ -1,4 +1,3 @@
-export * from "./create-label-modal";
 export * from "./create-update-label-inline";
 export * from "./delete-label-modal";
 export * from "./project-setting-label-group";

From 800fcd25d391bbd76ce935610999a5b62ea22311 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 3 Sep 2025 17:58:35 +0530
Subject: [PATCH 2/6] fix: label spinner

---
 .../issues/issue-layouts/properties/label-dropdown.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
index 20d137e9d87..357423e0496 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
@@ -277,7 +277,7 @@ export const LabelDropdown = (props: ILabelDropdownProps) => {
                     </Combobox.Option>
                   ))
                 ) : submitting ? (
-                  <Loader className="spin  h-3.5 w-3.5" />
+                  <Loader className="animate-spin h-3.5 w-3.5" />
                 ) : canCreateLabel ? (
                   <p
                     onClick={() => {

From def03c028a8e73972a298788d5ad44c40c3bf33c Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 3 Sep 2025 19:35:20 +0530
Subject: [PATCH 3/6] chore: add label flow improvements

---
 .../modals/create-modal/issue-properties.tsx  |  1 -
 .../components/default-properties.tsx         | 13 ++---
 .../components/issues/issue-modal/form.tsx    | 17 +-----
 .../core/components/issues/select/base.tsx    | 58 ++++++++++++++-----
 .../components/issues/select/dropdown.tsx     | 19 +++++-
 5 files changed, 70 insertions(+), 38 deletions(-)

diff --git a/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx b/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
index 2a36099378a..b0661990974 100644
--- a/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
@@ -89,7 +89,6 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
       {/* labels */}
       <div className="h-7">
         <IssueLabelSelect
-          setIsOpen={() => {}}
           value={data?.label_ids || []}
           onChange={(labelIds) => handleData("label_ids", labelIds)}
           projectId={projectId}
diff --git a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
index 6b3c060d7b7..f37bcd97cc1 100644
--- a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
@@ -42,7 +42,6 @@ type TIssueDefaultPropertiesProps = {
   parentId: string | null;
   isDraft: boolean;
   handleFormChange: () => void;
-  setLabelModal: React.Dispatch<React.SetStateAction<boolean>>;
   setSelectedParentIssue: (issue: ISearchIssueResponse) => void;
 };
 
@@ -58,8 +57,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
     parentId,
     isDraft,
     handleFormChange,
-    setLabelModal,
-    setSelectedParentIssue,
+    setSelectedParentIssue
   } = props;
   // states
   const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
@@ -74,7 +72,8 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
 
   const { getIndex } = getTabIndex(ETabIndices.ISSUE_FORM, isMobile);
 
-  const canCreateLabel = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+  const canCreateLabel =
+    projectId && allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug, projectId);
 
   const minDate = getDate(startDate);
   minDate?.setDate(minDate.getDate());
@@ -147,15 +146,14 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
         render={({ field: { value, onChange } }) => (
           <div className="h-7">
             <IssueLabelSelect
-              setIsOpen={setLabelModal}
               value={value}
               onChange={(labelIds) => {
                 onChange(labelIds);
                 handleFormChange();
               }}
-              projectId={projectId ?? undefined}
+              projectId={projectDetails?.id ?? undefined}
               tabIndex={getIndex("label_ids")}
-              createLabelEnabled={canCreateLabel}
+              createLabelEnabled={!!canCreateLabel}
             />
           </div>
         )}
@@ -333,6 +331,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
             }}
             projectId={projectId ?? undefined}
             issueId={isDraft ? undefined : id}
+            searchEpic
           />
         )}
       />
diff --git a/apps/web/core/components/issues/issue-modal/form.tsx b/apps/web/core/components/issues/issue-modal/form.tsx
index b84ce03a00c..ea37d99aef6 100644
--- a/apps/web/core/components/issues/issue-modal/form.tsx
+++ b/apps/web/core/components/issues/issue-modal/form.tsx
@@ -28,12 +28,10 @@ import {
   IssueProjectSelect,
   IssueTitleInput,
 } from "@/components/issues/issue-modal/components";
-import { CreateLabelModal } from "@/components/labels";
 // helpers
 // hooks
 import { useIssueModal } from "@/hooks/context/use-issue-modal";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
-import { useLabel } from "@/hooks/store/use-label";
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectState } from "@/hooks/store/use-project-state";
 import { useWorkspaceDraftIssues } from "@/hooks/store/workspace-draft";
@@ -68,6 +66,7 @@ export interface IssueFormProps {
   handleDraftAndClose?: () => void;
   isProjectSelectionDisabled?: boolean;
   storeType: EIssuesStoreType;
+  convertToWorkItem?: boolean;
 }
 
 export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
@@ -97,7 +96,6 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   } = props;
 
   // states
-  const [labelModal, setLabelModal] = useState(false);
   const [gptAssistantModal, setGptAssistantModal] = useState(false);
   const [isMoving, setIsMoving] = useState<boolean>(false);
 
@@ -126,7 +124,6 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   } = useIssueModal();
   const { isMobile } = usePlatformOS();
   const { moveIssue } = useWorkspaceDraftIssues();
-  const { createLabel } = useLabel();
 
   const {
     issue: { getIssueById },
@@ -363,17 +360,6 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
 
   return (
     <FormProvider {...methods}>
-      {projectId && (
-        <CreateLabelModal
-          createLabel={createLabel.bind(createLabel, workspaceSlug?.toString(), projectId)}
-          isOpen={labelModal}
-          handleClose={() => setLabelModal(false)}
-          onSuccess={(response) => {
-            setValue<"label_ids">("label_ids", [...watch("label_ids"), response.id]);
-            handleFormChange();
-          }}
-        />
-      )}
       <div className="flex gap-2 bg-transparent">
         <div className="rounded-lg w-full">
           <form
@@ -502,7 +488,6 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   parentId={watch("parent_id")}
                   isDraft={isDraft}
                   handleFormChange={handleFormChange}
-                  setLabelModal={setLabelModal}
                   setSelectedParentIssue={setSelectedParentIssue}
                 />
               </div>
diff --git a/apps/web/core/components/issues/select/base.tsx b/apps/web/core/components/issues/select/base.tsx
index 8c48cf78e8d..128e28c072d 100644
--- a/apps/web/core/components/issues/select/base.tsx
+++ b/apps/web/core/components/issues/select/base.tsx
@@ -2,8 +2,9 @@ import React, { useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { Check, Component, Plus, Search, Tag } from "lucide-react";
+import { Check, Component, Loader, Search, Tag } from "lucide-react";
 import { Combobox } from "@headlessui/react";
+import { getRandomLabelColor } from "@plane/constants";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
@@ -26,7 +27,7 @@ export type TWorkItemLabelSelectBaseProps = {
   onChange: (value: string[]) => void;
   onDropdownOpen?: () => void;
   placement?: Placement;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  createLabel?: (data: Partial<IIssueLabel>) => Promise<IIssueLabel>;
   tabIndex?: number;
   value: string[];
 };
@@ -43,7 +44,7 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
     onChange,
     onDropdownOpen,
     placement,
-    setIsOpen,
+    createLabel,
     tabIndex,
     value,
   } = props;
@@ -55,6 +56,7 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [submitting, setSubmitting] = useState<boolean>(false);
   // plane hooks
   const { t } = useTranslation();
   // store hooks
@@ -88,6 +90,17 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
     onChange(val);
   };
 
+  const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    if (query !== "" && e.key === "Escape") {
+      setQuery("");
+    }
+
+    if (query !== "" && e.key === "Enter" && !e.nativeEvent.isComposing && createLabelEnabled) {
+      e.preventDefault();
+      await handleAddLabel(query);
+    }
+  };
   const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
 
   const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -104,6 +117,15 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
     }
   }, [isDropdownOpen, isMobile]);
 
+  const handleAddLabel = async (labelName: string) => {
+    if (!createLabel) return;
+    setSubmitting(true);
+    const label = await createLabel({ name: labelName, color: getRandomLabelColor() });
+    onChange([...value, label.id]);
+    setQuery("");
+    setSubmitting(false);
+  };
+
   return (
     <Combobox
       as="div"
@@ -165,6 +187,7 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
                 onChange={(event) => setQuery(event.target.value)}
                 placeholder={t("search")}
                 displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
               />
             </div>
             <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
@@ -242,22 +265,31 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
                         </div>
                       );
                   })
+                ) : submitting ? (
+                  <Loader className="animate-spin  h-3.5 w-3.5" />
+                ) : createLabelEnabled ? (
+                  <p
+                    onClick={() => {
+                      if (!query.length) return;
+                      handleAddLabel(query);
+                    }}
+                    className={`text-left text-custom-text-200 ${query.length ? "cursor-pointer" : "cursor-default"}`}
+                  >
+                    {/* TODO: translate here */}
+                    {query.length ? (
+                      <>
+                        + Add <span className="text-custom-text-100">&quot;{query}&quot;</span> to labels
+                      </>
+                    ) : (
+                      t("label.create.type")
+                    )}
+                  </p>
                 ) : (
                   <p className="text-custom-text-400 italic py-1 px-1.5">{t("no_matching_results")}</p>
                 )
               ) : (
                 <p className="text-custom-text-400 italic py-1 px-1.5">{t("loading")}</p>
               )}
-              {createLabelEnabled && (
-                <button
-                  type="button"
-                  className="flex items-center gap-2 w-full select-none rounded px-1 py-2 hover:bg-custom-background-80"
-                  onClick={() => setIsOpen(true)}
-                >
-                  <Plus className="h-3 w-3" aria-hidden="true" />
-                  <span className="whitespace-nowrap">{t("create_new_label")}</span>
-                </button>
-              )}
             </div>
           </div>
         </Combobox.Options>
diff --git a/apps/web/core/components/issues/select/dropdown.tsx b/apps/web/core/components/issues/select/dropdown.tsx
index be66d709ab6..08d792b77f5 100644
--- a/apps/web/core/components/issues/select/dropdown.tsx
+++ b/apps/web/core/components/issues/select/dropdown.tsx
@@ -1,8 +1,11 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+import { EUserPermissionsLevel } from "@plane/constants";
+import { EUserPermissions, IIssueLabel } from "@plane/types";
 // hooks
 import { useLabel } from "@/hooks/store/use-label";
+import { useUserPermissions } from "@/hooks/store/user";
 // local imports
 import { TWorkItemLabelSelectBaseProps, WorkItemLabelSelectBase } from "./base";
 
@@ -15,21 +18,35 @@ export const IssueLabelSelect: React.FC<TWorkItemLabelSelectProps> = observer((p
   // router
   const { workspaceSlug } = useParams();
   // store hooks
-  const { getProjectLabelIds, getLabelById, fetchProjectLabels } = useLabel();
+  const { allowPermissions } = useUserPermissions();
+  const { getProjectLabelIds, getLabelById, fetchProjectLabels, createLabel } = useLabel();
   // derived values
   const projectLabelIds = getProjectLabelIds(projectId);
 
+  const canCreateLabel =
+    projectId &&
+    allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug?.toString(), projectId);
+
   const onDropdownOpen = () => {
     if (projectLabelIds === undefined && workspaceSlug && projectId)
       fetchProjectLabels(workspaceSlug.toString(), projectId);
   };
 
+  const handleCreateLabel = (data: Partial<IIssueLabel>) => {
+    if (!workspaceSlug || !projectId) {
+      throw new Error("Workspace slug or project ID is missing");
+    }
+    return createLabel(workspaceSlug.toString(), projectId, data);
+  };
+
   return (
     <WorkItemLabelSelectBase
       {...props}
       getLabelById={getLabelById}
       labelIds={projectLabelIds ?? []}
       onDropdownOpen={onDropdownOpen}
+      createLabel={handleCreateLabel}
+      createLabelEnabled={!!canCreateLabel}
     />
   );
 });

From 5f926190dcecadf342d2286efb7e0e9e422809cd Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 3 Sep 2025 19:43:15 +0530
Subject: [PATCH 4/6] chore: code refactor

---
 .../issues/issue-modal/components/default-properties.tsx         | 1 -
 apps/web/core/components/issues/issue-modal/form.tsx             | 1 -
 2 files changed, 2 deletions(-)

diff --git a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
index f37bcd97cc1..ddde41e896b 100644
--- a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
@@ -331,7 +331,6 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
             }}
             projectId={projectId ?? undefined}
             issueId={isDraft ? undefined : id}
-            searchEpic
           />
         )}
       />
diff --git a/apps/web/core/components/issues/issue-modal/form.tsx b/apps/web/core/components/issues/issue-modal/form.tsx
index ea37d99aef6..c4fbb6d4132 100644
--- a/apps/web/core/components/issues/issue-modal/form.tsx
+++ b/apps/web/core/components/issues/issue-modal/form.tsx
@@ -66,7 +66,6 @@ export interface IssueFormProps {
   handleDraftAndClose?: () => void;
   isProjectSelectionDisabled?: boolean;
   storeType: EIssuesStoreType;
-  convertToWorkItem?: boolean;
 }
 
 export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {

From 76ebf19773f162da557babf625aa682935a5e0dc Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 3 Sep 2025 20:21:13 +0530
Subject: [PATCH 5/6] chore: code refactor

---
 .../components/default-properties.tsx         |  2 +-
 .../core/components/issues/select/base.tsx    | 39 +++++++++++++------
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
index ddde41e896b..96cff535267 100644
--- a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
@@ -151,7 +151,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
                 onChange(labelIds);
                 handleFormChange();
               }}
-              projectId={projectDetails?.id ?? undefined}
+              projectId={projectId ?? undefined}
               tabIndex={getIndex("label_ids")}
               createLabelEnabled={!!canCreateLabel}
             />
diff --git a/apps/web/core/components/issues/select/base.tsx b/apps/web/core/components/issues/select/base.tsx
index 128e28c072d..07ee8d91793 100644
--- a/apps/web/core/components/issues/select/base.tsx
+++ b/apps/web/core/components/issues/select/base.tsx
@@ -91,14 +91,23 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
   };
 
   const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
-    e.stopPropagation();
-    if (query !== "" && e.key === "Escape") {
+    const q = query.trim();
+    if (q !== "" && e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
       setQuery("");
+      return;
     }
-
-    if (query !== "" && e.key === "Enter" && !e.nativeEvent.isComposing && createLabelEnabled) {
+    if (
+      q !== "" &&
+      e.key === "Enter" &&
+      !e.nativeEvent.isComposing &&
+      createLabelEnabled &&
+      filteredOptions.length === 0 &&
+      !submitting
+    ) {
       e.preventDefault();
-      await handleAddLabel(query);
+      await handleAddLabel(q);
     }
   };
   const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
@@ -118,12 +127,20 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
   }, [isDropdownOpen, isMobile]);
 
   const handleAddLabel = async (labelName: string) => {
-    if (!createLabel) return;
+    if (!createLabel || submitting) return;
+    const name = labelName.trim();
+    if (!name) return;
     setSubmitting(true);
-    const label = await createLabel({ name: labelName, color: getRandomLabelColor() });
-    onChange([...value, label.id]);
-    setQuery("");
-    setSubmitting(false);
+    try {
+      const existing = labelsList.find((l) => l.name.toLowerCase() === name.toLowerCase());
+      const idToAdd = existing ? existing.id : (await createLabel({ name, color: getRandomLabelColor() })).id;
+      onChange(Array.from(new Set([...value, idToAdd])));
+      setQuery("");
+    } catch (e) {
+      console.error("Failed to create label", e);
+    } finally {
+      setSubmitting(false);
+    }
   };
 
   return (
@@ -266,7 +283,7 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
                       );
                   })
                 ) : submitting ? (
-                  <Loader className="animate-spin  h-3.5 w-3.5" />
+                  <Loader className="animate-spin h-3.5 w-3.5" />
                 ) : createLabelEnabled ? (
                   <p
                     onClick={() => {

From cbecc141448822a33b8902220fd100961616a41a Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Thu, 4 Sep 2025 15:02:57 +0530
Subject: [PATCH 6/6] chore: code refactor

---
 .../issues/issue-modal/components/default-properties.tsx        | 2 +-
 packages/utils/src/string.ts                                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
index 96cff535267..53abf7bd8e5 100644
--- a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
@@ -57,7 +57,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
     parentId,
     isDraft,
     handleFormChange,
-    setSelectedParentIssue
+    setSelectedParentIssue,
   } = props;
   // states
   const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
diff --git a/packages/utils/src/string.ts b/packages/utils/src/string.ts
index fdd0a73496f..7735011511e 100644
--- a/packages/utils/src/string.ts
+++ b/packages/utils/src/string.ts
@@ -1,5 +1,5 @@
-import type { Content, JSONContent } from "@plane/types";
 import DOMPurify from "isomorphic-dompurify";
+import type { Content, JSONContent } from "@plane/types";
 
 /**
  * @description Adds space between camelCase words