IO-934 Refactor some search select fields & save employee on new ticket

client/src/components/employee-search-select/employee-search-select.component.jsx

@@ -1,33 +1,21 @@
 import { Select, Space, Tag } from "antd";
-import React, { forwardRef, useEffect, useState } from "react";
+import React, { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 const { Option } = Select;
 //To be used as a form element only.
 
-const EmployeeSearchSelect = (
+const EmployeeSearchSelect = ({ options, ...props }, ref) => {
-  { value, onChange, options, onSelect, onBlur, ...restProps },
-  ref
-) => {
-  const [option, setOption] = useState(value);
   const { t } = useTranslation();
-  useEffect(() => {
-    if (value !== option && onChange) {
-      onChange(option);
-    }
-  }, [value, option, onChange]);
 
   return (
     <Select
       showSearch
-      value={option}
+      // value={option}
       style={{
         width: 400,
       }}
-      onChange={setOption}
       optionFilterProp="search"
-      onSelect={onSelect}
+      {...props}
-      onBlur={onBlur}
-      {...restProps}
     >
       {options
         ? options.map((o) => (

client/src/components/job-search-select/job-search-select.component.jsx

@@ -2,7 +2,7 @@ import { LoadingOutlined } from "@ant-design/icons";
 import { useLazyQuery } from "@apollo/client";
 import { Empty, Select } from "antd";
 import _ from "lodash";
-import React, { forwardRef, useEffect, useState } from "react";
+import React, { forwardRef, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import {
   SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE,
@@ -13,13 +13,11 @@ const { Option } = Select;
 
 const JobSearchSelect = (
   {
-    value,
-    onChange,
-    onBlur,
     disabled,
     convertedOnly = false,
     notExported = true,
     clm_no = false,
+    ...restProps
   },
   ref
 ) => {
@@ -52,20 +50,11 @@ const JobSearchSelect = (
     debouncedExecuteSearch({ variables: { search: value } });
   };
 
-  const [option, setOption] = useState(value);
-
   useEffect(() => {
-    if (value === option && value) {
+    if (restProps.value) {
-      callIdSearch({ variables: { id: value } }); // Sometimes results in a no-op. Not sure how to fix.
+      callIdSearch({ variables: { id: restProps.value } }); // Sometimes results in a no-op. Not sure how to fix.
     }
-  }, [value, option, callIdSearch]);
+  }, [restProps.value, callIdSearch]);
-
-  const handleSelect = (value) => {
-    setOption(value);
-    if (value !== option && onChange) {
-      onChange(value);
-    }
-  };
 
   const theOptions = _.uniqBy(
     [
@@ -82,17 +71,13 @@ const JobSearchSelect = (
         disabled={disabled}
         showSearch
         autoFocus
-        value={option}
         style={{
           width: "100%",
         }}
         filterOption={false}
         onSearch={handleSearch}
-        //     onChange={setOption}
-        onChange={handleSelect}
-        onSelect={handleSelect}
         notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
-        onBlur={onBlur}
+        {...restProps}
       >
         {theOptions
           ? theOptions.map((o) => (

client/src/components/time-ticket-modal/time-ticket-modal.container.jsx

@@ -92,9 +92,14 @@ export function TimeTicketModalContainer({
     if (enterAgain) {
       //Capture the existing information and repopulate it.
 
-      const prev = form.getFieldsValue(["date"]);
+      const prev = form.getFieldsValue(["date", "employeeid"]);
+      console.log(
+        "🚀  ~ file: time-ticket-modal.container.jsx  ~ line 96  ~ prev",
+        prev
+      );
 
       form.resetFields();
+
       form.setFieldsValue(prev);
     } else {
       toggleModalVisible();
@@ -177,6 +182,7 @@ export function TimeTicketModalContainer({
           {timeTicketModal.context && timeTicketModal.context.id ? null : (
             <Button
               type="primary"
+              htmlType="submit"
               onClick={() => {
                 setEnterAgain(true);
               }}