Fixed assignee and requirement popups

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

@@ -10,6 +10,7 @@ import TimeInput from "components/ui/TimeInput";
 import { PossibleMember } from "components/forms/TaskForm";
 
 import './assignees-form.scss';
+import '../form.scss';
 
 interface Props {
     assignees: TaskAssignment[];
@@ -79,18 +80,20 @@ export default function AssigneesForm({ assignees, members, onNew, onDelete }: P
             {
                 addNew && (
                     <Popup onClose={() => setAddNew(false)}>
-                        <select onChange={(e) => setSelectedMember(e.target.value)}>
-                            <option value="" selected disabled hidden>Please select a user</option>
-                            {
-                                possibleMembers.map((member) => (
-                                    <option value={member.id} key={member.id}>{member.label}</option>
-                                ))
-                            }
-                        </select>
-                        <TimeInput onChange={value => setSelectedTime(value)} />
-                        <Button type="submit" onClick={addAssignee} className="expanded">
-                            Add the assignee
-                        </Button>
+                        <form>
+                            <select onChange={(e) => setSelectedMember(e.target.value)}>
+                                <option value="" selected disabled hidden>Please select a user</option>
+                                {
+                                    possibleMembers.map((member) => (
+                                        <option value={member.id} key={member.id}>{member.label}</option>
+                                    ))
+                                }
+                            </select>
+                            <TimeInput onChange={value => setSelectedTime(value)} />
+                            <Button type="submit" onClick={addAssignee} className="expanded">
+                                Add the assignee
+                            </Button>
+                        </form>
                     </Popup>
                 )
             }

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

@@ -10,6 +10,7 @@ import Button from 'components/ui/Button';
 import TimeInput from 'components/ui/TimeInput'
 
 import './requirements-form.scss';
+import '../form.scss';
 
 interface Props {
     roles: PossibleRole[],
@@ -75,18 +76,20 @@ export default function RequirementsForm({ roles, requirements, onNew, onDelete
             {
                 addNew && (
                     <Popup onClose={() => setAddNew(false)}>
-                        <select onChange={(e) => setSelectedRole(e.target.value)}>
-                            <option value="" selected disabled hidden>Please select a role</option>
-                            {
-                                possibleRoles.map((role) => (
-                                    <option value={role.id} key={role.id}>{role.label}</option>
-                                ))
-                            }
-                        </select>
-                        <TimeInput onChange={value => setSelectedTime(value)} />
-                        <Button type="submit" onClick={addRequirement} className="expanded">
-                            Create new requirement
-                        </Button>
+                        <form>
+                            <select onChange={(e) => setSelectedRole(e.target.value)}>
+                                <option value="" selected disabled hidden>Please select a role</option>
+                                {
+                                    possibleRoles.map((role) => (
+                                        <option value={role.id} key={role.id}>{role.label}</option>
+                                    ))
+                                }
+                            </select>
+                            <TimeInput onChange={value => setSelectedTime(value)} />
+                            <Button type="submit" onClick={addRequirement} className="expanded">
+                                Create new requirement
+                            </Button>
+                        </form>
                     </Popup>
                 )
             }

client/src/components/ui/TimeInput/index.tsx

@@ -19,7 +19,7 @@ function getFormatted(hours: number) {
 }
 
 export default function TimeInput({ onChange: userOnChange, initialTime }: Props) {
-    const [formatted, setFormatted] = useState(initialTime ? getFormatted(initialTime) : '');
+    const [formatted, setFormatted] = useState(initialTime ? getFormatted(initialTime) : 'none');
 
     const onChange = useCallback(event => {
         const value = parseFloat(event.target.value);
@@ -27,7 +27,7 @@ export default function TimeInput({ onChange: userOnChange, initialTime }: Props
         if (!Number.isNaN(value)) {
             setFormatted(getFormatted(value));
         } else {
-            setFormatted('');
+            setFormatted('none');
         }
     }, [userOnChange]);