diff --git a/client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx b/client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx
index 8cb0613c4..86e73bb72 100644
--- a/client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx
+++ b/client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx
@@ -1,17 +1,14 @@
 import { Select, Row, Col, Tag } from "antd";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 
 //To be used as a form element only.
 const { Option } = Select;
-const InvoiceLineSearchSelect = ({
-  value,
-  onChange,
-  options,
-  onBlur,
-  onSelect,
-}) => {
+const InvoiceLineSearchSelect = (
+  { value, onChange, options, onBlur, onSelect },
+  ref
+) => {
   const [option, setOption] = useState(value);
   const { t } = useTranslation();
 
@@ -23,6 +20,7 @@ const InvoiceLineSearchSelect = ({
 
   return (
     <Select
+      ref={ref}
       showSearch
       autoFocus
       value={option}
@@ -62,4 +60,4 @@ const InvoiceLineSearchSelect = ({
     </Select>
   );
 };
-export default InvoiceLineSearchSelect;
+export default forwardRef(InvoiceLineSearchSelect);
diff --git a/client/src/components/job-search-select/job-search-select.component.jsx b/client/src/components/job-search-select/job-search-select.component.jsx
index 85c160ad2..e8e48c6f4 100644
--- a/client/src/components/job-search-select/job-search-select.component.jsx
+++ b/client/src/components/job-search-select/job-search-select.component.jsx
@@ -1,17 +1,13 @@
 import { Select } from "antd";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, forwardRef } from "react";
 const { Option } = Select;
 
 //To be used as a form element only.
 
-const JobSearchSelect = ({
-  value,
-  onChange,
-  options,
-  onBlur,
-  disabled,
-  loading,
-}) => {
+const JobSearchSelect = (
+  { value, onChange, options, onBlur, disabled, loading },
+  ref
+) => {
   const [option, setOption] = useState(value);
 
   useEffect(() => {
@@ -22,6 +18,7 @@ const JobSearchSelect = ({
 
   return (
     <Select
+      ref={ref}
       disabled={disabled}
       showSearch
       autoFocus
@@ -31,9 +28,8 @@ const JobSearchSelect = ({
       }}
       loading={loading}
       onChange={setOption}
-      optionFilterProp="children"
-      onBlur={onBlur}
-    >
+      optionFilterProp='children'
+      onBlur={onBlur}>
       {options
         ? options.map((o) => (
             <Option key={o.id} value={o.id}>
@@ -48,4 +44,4 @@ const JobSearchSelect = ({
     </Select>
   );
 };
-export default JobSearchSelect;
+export default forwardRef(JobSearchSelect);
diff --git a/client/src/components/vendor-search-select/vendor-search-select.component.jsx b/client/src/components/vendor-search-select/vendor-search-select.component.jsx
index bd514bfc3..64e70837f 100644
--- a/client/src/components/vendor-search-select/vendor-search-select.component.jsx
+++ b/client/src/components/vendor-search-select/vendor-search-select.component.jsx
@@ -1,16 +1,13 @@
 import { Select, Tag } from "antd";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, forwardRef } from "react";
 const { Option } = Select;
 
 //To be used as a form element only.
 
-const VendorSearchSelect = ({
-  value,
-  onChange,
-  options,
-  onSelect,
-  disabled,
-}) => {
+const VendorSearchSelect = (
+  { value, onChange, options, onSelect, disabled },
+  ref
+) => {
   const [option, setOption] = useState(value);
 
   useEffect(() => {
@@ -21,6 +18,7 @@ const VendorSearchSelect = ({
 
   return (
     <Select
+      ref={ref}
       showSearch
       value={option}
       style={{
@@ -43,4 +41,4 @@ const VendorSearchSelect = ({
     </Select>
   );
 };
-export default VendorSearchSelect;
+export default forwardRef(VendorSearchSelect);