Style adjustments and bugfixes in the task form

client/src/components/forms/AssigneesForm/assignees-form.scss

@@ -37,6 +37,8 @@
             align-items: center;
             font-size: 24px;
             font-weight: s.$weight-bold;
+            height: calc(2em + 40px);
+            user-select: none;
         }
     }
 }

client/src/components/forms/AssigneesForm/index.tsx

@@ -80,7 +80,7 @@ export default function AssigneesForm({ assignees, members, onNew, onDelete }: P
                 addNew && (
                     <Popup onClose={() => setAddNew(false)}>
                         <select onChange={(e) => setSelectedMember(e.target.value)}>
-                            <option value="">Please select a user</option>
+                            <option value="" selected disabled hidden>Please select a user</option>
                             {
                                 possibleMembers.map((member) => (
                                     <option value={member.id} key={member.id}>{member.label}</option>

client/src/components/forms/ProjectForm/index.tsx

@@ -141,12 +141,12 @@ export default function ProjectForm({ project, onSubmit }: Props) {
                         status &&
                         <div className="field">
                             <label className="field-label" htmlFor="status">Status</label>
-                            <select id="status" defaultValue={project?.status} onChange={(e) => {
+                            <select id="status" defaultValue={project?.status ?? ''} onChange={(e) => {
                                 let currentStatus = Object.values(Status).find(s => s === e.target.value) ?? undefined;
                                 setStatus(currentStatus);
                             }
                             }>
-                                <option value="">Please choose a status</option>
+                                <option value="" disabled hidden>Please choose a status</option>
                                 {
                                     allStatus.map((s) => (
                                         <option value={s} key={s}>{s}</option>

client/src/components/forms/RequirementsForm/index.tsx

@@ -76,7 +76,7 @@ export default function RequirementsForm({ roles, requirements, onNew, onDelete
                 addNew && (
                     <Popup onClose={() => setAddNew(false)}>
                         <select onChange={(e) => setSelectedRole(e.target.value)}>
-                            <option value="">Please select a role</option>
+                            <option value="" selected disabled hidden>Please select a role</option>
                             {
                                 possibleRoles.map((role) => (
                                     <option value={role.id} key={role.id}>{role.label}</option>

client/src/components/forms/RequirementsForm/requirements-form.scss

@@ -37,6 +37,8 @@
             align-items: center;
             font-size: 24px;
             font-weight: s.$weight-bold;
+            height: calc(2em + 40px);
+            user-select: none;
         }
     }
 }

client/src/components/forms/TaskForm/index.tsx

@@ -185,11 +185,11 @@ export default function TaskForm({ task, onSubmit, project }: Props) {
                         <label className="field-label"  htmlFor="status">
                             Priority
                     </label>
-                        <select defaultValue={priority} onChange={(e) => {
+                        <select defaultValue={priority ?? ''} onChange={(e) => {
                             let currentPriority = Object.values(Priority).find(s => s === e.target.value) ?? undefined;
                             setPriority(currentPriority);
                         }}>
-                            <option value={''}>Please choose a priority</option>
+                            <option value="" disabled hidden>Please choose a priority</option>
                             {
                                 allPriorities.map((priority) => (
                                     <option value={priority} key={priority}>{priority}</option>
@@ -206,16 +206,16 @@ export default function TaskForm({ task, onSubmit, project }: Props) {
                 </div>
                 <div className="col">
                     {
-                        status && (
+                        task && (
                             <div className="field">
                                 <label className="field-label"  htmlFor="status">
                                     Status
                                 </label>
-                                <select defaultValue={status} id="status" onChange={(e) => {
+                                <select defaultValue={status ?? ''} id="status" onChange={(e) => {
                                     let currentStatus = Object.values(Status).find(s => s === e.target.value) ?? undefined;
                                     setStatus(currentStatus);
                                 }}>
-                                    <option value={''}>Please choose a status</option>
+                                    <option value="" disabled hidden>Please choose a status</option>
                                     {
                                         allStatus.map((status) => (
                                             <option value={status} key={status}>{status}</option>

client/src/components/ui/Popup/popup.scss

@@ -14,6 +14,7 @@
     align-items: center;
 
     .popup {
+        will-change: transform;
         animation: moveup 300ms ease;
         max-height: 100vh;
         overflow: auto;
@@ -44,7 +45,6 @@
         transform: translateY(50px);
         opacity: 0.5;
     }
-
     to {
         transform: translateY(0);
         opacity: 1;
@@ -55,7 +55,6 @@
     from {
         opacity: 0;
     }
-
     to {
         opacity: 1;
     }