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,6 +117,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
         )}
       </div>
       <span>{errors.name ? errors.name.message : null}</span>
+      <div className="relative">
         <Controller
           name="description"
           control={control}
@@ -149,13 +144,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
                 onBlur={() => {
                   setIsSubmitting(true);
                   handleSubmit(handleDescriptionFormSubmit)()
-                  .then(() => {
-                    setIsSubmitting(false);
-                    setShowAlert(false);
-                  })
-                  .catch(() => {
-                    setIsSubmitting(false);
-                  });
+                    .then(() => setShowAlert(false))
+                    .finally(() => setIsSubmitting(false));
                 }}
                 placeholder="Description"
                 editable={isAllowed}
@@ -163,13 +153,12 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
             );
           }}
         />
-      <div
-        className={`absolute -bottom-8 right-0 text-sm text-custom-text-200 ${
-          isSubmitting ? "block" : "hidden"
-        }`}
-      >
+        {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 ? (