Install controller.

src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx

@@ -4,50 +4,68 @@ import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { getSeniorList } from 'api/getSeniorList';
 import { ResponseProps } from 'api/ResponseProps';
+import { Control, Controller } from 'react-hook-form';
+import { ReservationProps } from './ReservationProps';
 
-export const SeniorSearch: FC = () => {
+type SeniorSearchProps = {
+  control: Control<ReservationProps>;
+};
+
+export const SeniorSearch: FC<SeniorSearchProps> = ({
+  control,
+}: SeniorSearchProps) => {
   const [value, setValue] = useState<ResponseProps | null>(null);
   const [seniors, setSeniors] = useState<ResponseProps[]>([]);
+  const [query, setQuery] = useState<string>('');
 
+  // FIX: Input closing when the data is changed.
+  // The issue is caused by the stopped re-rendering of react hook form. Consider
+  // attaching the value manually or to isolate this component.
   const handleChange = (newValue: string): void => {
-    if (newValue !== undefined) {
-      const MIN_SEARCH_LENGTH = 3;
-      if (newValue.length >= MIN_SEARCH_LENGTH)
-        getSeniorList(newValue).then((list) => {
+    const MIN_SEARCH_LENGTH = 4;
+    if (newValue.length >= MIN_SEARCH_LENGTH && value == null) {
+      getSeniorList(newValue).then((list) => {
+        if (list.length !== 0) {
           setSeniors(list);
-        });
+        } else {
+          setSeniors([]);
+        }
+      });
     }
   };
 
   return (
-    <Autocomplete
-      value={value}
-      id="senior-searcher"
-      onInputChange={(event, newValue) => handleChange(newValue)}
-      onChange={(event, newValue) => {
-        setValue(newValue);
-      }}
-      options={seniors}
-      getOptionSelected={(option, val) => option.id === val.id}
-      getOptionLabel={(option) => {
-        if (Object.prototype.hasOwnProperty.call({ user: true }, 'user')) {
-          return option.user.lastName;
-        }
-        return '';
-      }}
-      renderOption={(option) => (
-        <>
-          {option.user.firstName} {option.user.lastName} {option.user.username}
-        </>
-      )}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          label="Search a senior"
-          variant="outlined"
-          InputProps={{
-            ...params.InputProps,
+    <Controller
+      control={control}
+      name="senior"
+      as={({ onChange }) => (
+        <Autocomplete
+          value={value}
+          id="senior-searcher"
+          onInputChange={(_, newValue) => handleChange(newValue)}
+          onChange={(_, val) => {
+            onChange(val?.id);
+            setValue(val);
           }}
+          options={seniors}
+          getOptionSelected={(option, val) => option.id === val.id}
+          getOptionLabel={(option) => option.user.lastName}
+          renderOption={(option) => (
+            <>
+              {option.user.firstName} {option.user.lastName}{' '}
+              {option.user.username} {option.memberCardNumber}
+            </>
+          )}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label="Search a senior"
+              variant="outlined"
+              InputProps={{
+                ...params.InputProps,
+              }}
+            />
+          )}
         />
       )}
     />