add forwardRef hook

CDCgov · Sep 6, 2023 · 54ed7ed · 54ed7ed
1 parent 9130d59
commit 54ed7ed
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 20 deletions.
diff --git a/frontend/src/app/commonComponents/ComboBox.tsx b/frontend/src/app/commonComponents/ComboBox.tsx
@@ -1,5 +1,5 @@
 import { ComboBox as TrussComboBox, Label } from "@trussworks/react-uswds";
-import React, { ComponentPropsWithRef } from "react";
+import React, { ComponentPropsWithRef, forwardRef } from "react";
 
 import Required from "./Required";
 
@@ -10,15 +10,10 @@ export type ComboBoxProps = TrussComponentProps & {
 
 // props here are only the required ones from Truss and can be extended
 // as needed with additional values.
-const ComboBox: React.FC<ComboBoxProps> = ({
-  name,
-  id,
-  options,
-  onChange,
-  disabled,
-  ref,
-  required = false,
-}) => {
+const ComboBox: React.FC<ComboBoxProps> = forwardRef(function (
+  { id, name, required, options, onChange, disabled }: ComboBoxProps,
+  ref
+) {
   return (
     <>
       <Label htmlFor={id}>
@@ -35,6 +30,6 @@ const ComboBox: React.FC<ComboBoxProps> = ({
       />
     </>
   );
-};
+});
 
 export default ComboBox;
diff --git a/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.tsx b/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.tsx
@@ -1,11 +1,11 @@
 import { faSlidersH } from "@fortawesome/free-solid-svg-icons";
 import React, { Ref } from "react";
-import { ComboBox, ComboBoxRef, Label } from "@trussworks/react-uswds";
+import { ComboBoxRef } from "@trussworks/react-uswds";
 
+import ComboBox from "../../commonComponents/ComboBox";
 import Button from "../../commonComponents/Button/Button";
 import SupportHomeLink from "../SupportHomeLink";
 import { Option } from "../../commonComponents/Dropdown";
-import Required from "../../commonComponents/Required";
 
 import { ManageFacilityState } from "./ManageFacility";
 
@@ -68,9 +68,6 @@ const FacilitySelectFilter: React.FC<FacilitySelectFilterProps> = ({
             data-testid={"org-selection-container"}
             className="desktop:grid-col-4 tablet:grid-col-4 mobile:grid-col-1 margin-top-1em"
           >
-            <Label htmlFor="manage-facility-org-select">
-              Organization <Required />
-            </Label>
             <ComboBox
               name={"Organization"}
               id={"manage-facility-org-select"}
@@ -80,23 +77,21 @@ const FacilitySelectFilter: React.FC<FacilitySelectFilterProps> = ({
               }}
               disabled={loading}
               ref={orgRef}
+              required
             />
           </div>
           <div
             data-testid={"facility-selection-container"}
             className="desktop:grid-col-4 tablet:grid-col-4 mobile:grid-col-1 margin-top-1em"
           >
-            <Label htmlFor="manage-facility-facility-select">
-              Testing facility <Required />
-            </Label>
-
             <ComboBox
               name={"Facility"}
               id={"manage-facility-facility-select"}
               options={facilityOptions}
               onChange={(val) => onSelectFacility(val)}
               disabled={loading}
               ref={facilityRef}
+              required
             />
           </div>
           <div className="desktop:grid-col-4 tablet:grid-col-4 mobile:grid-col-1 ">