fix: project select not working on the create issue modal (#1608)

apps/app/components/issues/description-form.tsx

@@ -96,13 +96,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
             setCharacterLimit(false);
 
             setIsSubmitting(true);
-            handleSubmit(handleDescriptionFormSubmit)()
-              .then(() => {
-                setIsSubmitting(false);
-              })
-              .catch(() => {
-                setIsSubmitting(false);
-              });
+            handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting(false));
           }}
           required={true}
           className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
@@ -110,7 +104,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
           disabled={!isAllowed}
         />
         {characterLimit && (
-          <div className="pointer-events-none absolute bottom-0 right-0 z-[2] rounded bg-custom-background-80 p-1 text-xs">
+          <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 text-custom-text-200 p-0.5 text-xs">
             <span
               className={`${
                 watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
@@ -123,52 +117,47 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
         )}
       </div>
       <span>{errors.name ? errors.name.message : null}</span>
-      <Controller
-        name="description"
-        control={control}
-        render={({ field: { value } }) => {
-          if (!value && !watch("description_html")) return <></>;
+      <div className="relative">
+        <Controller
+          name="description"
+          control={control}
+          render={({ field: { value } }) => {
+            if (!value && !watch("description_html")) return <></>;
 
-          return (
-            <RemirrorRichTextEditor
-              value={
-                !value ||
-                value === "" ||
-                (typeof value === "object" && Object.keys(value).length === 0)
-                  ? watch("description_html")
-                  : value
-              }
-              onJSONChange={(jsonValue) => {
-                setShowAlert(true);
-                setValue("description", jsonValue);
-              }}
-              onHTMLChange={(htmlValue) => {
-                setShowAlert(true);
-                setValue("description_html", htmlValue);
-              }}
-              onBlur={() => {
-                setIsSubmitting(true);
-                handleSubmit(handleDescriptionFormSubmit)()
-                  .then(() => {
-                    setIsSubmitting(false);
-                    setShowAlert(false);
-                  })
-                  .catch(() => {
-                    setIsSubmitting(false);
-                  });
-              }}
-              placeholder="Description"
-              editable={isAllowed}
-            />
-          );
-        }}
-      />
-      <div
-        className={`absolute -bottom-8 right-0 text-sm text-custom-text-200 ${
-          isSubmitting ? "block" : "hidden"
-        }`}
-      >
-        Saving...
+            return (
+              <RemirrorRichTextEditor
+                value={
+                  !value ||
+                  value === "" ||
+                  (typeof value === "object" && Object.keys(value).length === 0)
+                    ? watch("description_html")
+                    : value
+                }
+                onJSONChange={(jsonValue) => {
+                  setShowAlert(true);
+                  setValue("description", jsonValue);
+                }}
+                onHTMLChange={(htmlValue) => {
+                  setShowAlert(true);
+                  setValue("description_html", htmlValue);
+                }}
+                onBlur={() => {
+                  setIsSubmitting(true);
+                  handleSubmit(handleDescriptionFormSubmit)()
+                    .then(() => setShowAlert(false))
+                    .finally(() => setIsSubmitting(false));
+                }}
+                placeholder="Description"
+                editable={isAllowed}
+              />
+            );
+          }}
+        />
+        {isSubmitting && (
+          <div className="absolute bottom-1 right-1 text-xs text-custom-text-200 bg-custom-background-100 p-3 z-10">
+            Saving...
+          </div>
+        )}
       </div>
     </div>
   );

apps/app/components/issues/form.tsx

@@ -261,8 +261,10 @@ export const IssueForm: FC<IssueFormProps> = ({
                 render={({ field: { value, onChange } }) => (
                   <IssueProjectSelect
                     value={value}
-                    onChange={onChange}
-                    setActiveProject={setActiveProject}
+                    onChange={(val: string) => {
+                      onChange(val);
+                      setActiveProject(val);
+                    }}
                   />
                 )}
               />

apps/app/components/issues/modal.tsx

@@ -95,9 +95,9 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
     };
 
   useEffect(() => {
-    if (projects && projects.length > 0)
+    if (projects && projects.length > 0 && !activeProject)
       setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
-  }, [projectId, projects]);
+  }, [activeProject, projectId, projects]);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {

apps/app/components/issues/select/project.tsx

@@ -8,14 +8,9 @@ import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
 export interface IssueProjectSelectProps {
   value: string;
   onChange: (value: string) => void;
-  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
 }
 
-export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({
-  value,
-  onChange,
-  setActiveProject,
-}) => {
+export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({ value, onChange }) => {
   const { projects } = useProjects();
 
   return (
@@ -29,10 +24,7 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({
           </span>
         </>
       }
-      onChange={(val: string) => {
-        onChange(val);
-        setActiveProject(val);
-      }}
+      onChange={(val: string) => onChange(val)}
       noChevron
     >
       {projects ? (