#1507 Dropdown box clearing itself

Author: hanguyen04

src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx

@@ -23,6 +23,7 @@ import { ReimbursementProductCreateArgs, validateWBS, wbsPipe } from 'shared';
 import { Add, Delete } from '@mui/icons-material';
 import { Control, Controller, FieldErrors, UseFormSetValue } from 'react-hook-form';
 import { ReimbursementRequestFormInput } from './ReimbursementRequestForm';
+import React, { useState } from 'react';
 
 interface ReimbursementProductTableProps {
   reimbursementProducts: ReimbursementProductCreateArgs[];
@@ -72,6 +73,8 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
     setValue(`reimbursementProducts.${index}.cost`, parseFloat(value.toFixed(2)));
   };
 
+  const [inputValue, setInputValue] = useState('');
+
   return (
     <TableContainer>
       <Table>
@@ -163,8 +166,12 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
                 sx={{ my: 1 }}
                 options={wbsElementAutocompleteOptions}
                 onChange={(_event, value) => {
-                  if (value) appendProduct({ wbsNum: validateWBS(value.id), name: '', cost: 0 });
+                  if (value) {
+                    appendProduct({ wbsNum: validateWBS(value.id), name: '', cost: 0 });
+                  }
                 }}
+                value={null}
+                blurOnSelect={true}
                 id={'append-product-autocomplete'}
                 size={'small'}
                 renderInput={(params) => <TextField {...params} placeholder="Select a Project" />}