From 6a0980906834f2d34947b27b48f5a41618c246f7 Mon Sep 17 00:00:00 2001
From: dbarkowsky <dylanbarkowsky@gmail.com>
Date: Wed, 17 Apr 2024 09:11:49 -0700
Subject: [PATCH 1/2] Fix options filter

---
 .../components/form/AutocompleteFormField.tsx | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/react-app/src/components/form/AutocompleteFormField.tsx b/react-app/src/components/form/AutocompleteFormField.tsx
index db2c9e61f5..6c1991c175 100644
--- a/react-app/src/components/form/AutocompleteFormField.tsx
+++ b/react-app/src/components/form/AutocompleteFormField.tsx
@@ -1,5 +1,13 @@
 import React from 'react';
-import { Autocomplete, SxProps, TextField, Paper, Box, autocompleteClasses } from '@mui/material';
+import {
+  Autocomplete,
+  SxProps,
+  TextField,
+  Paper,
+  Box,
+  autocompleteClasses,
+  FilterOptionsState,
+} from '@mui/material';
 import { ISelectMenuItem } from './SelectFormField';
 import { Controller, useFormContext } from 'react-hook-form';
 
@@ -13,6 +21,10 @@ type AutocompleteFormProps = {
   disableOptionsFunction?: (option: ISelectMenuItem) => boolean;
   disableClearable?: boolean;
   defaultValue?: ISelectMenuItem | null;
+  customOptionsFilter?: (
+    options: ISelectMenuItem[],
+    state: FilterOptionsState<ISelectMenuItem>,
+  ) => ISelectMenuItem[];
 };
 
 const CustomPaper = (props) => {
@@ -30,9 +42,17 @@ const AutocompleteFormField = (props: AutocompleteFormProps) => {
     allowNestedIndent,
     disableClearable,
     disableOptionsFunction,
+    customOptionsFilter,
     ...rest
   } = props;
 
+  const defaultOptionsFilter = (
+    options: ISelectMenuItem[],
+    state: FilterOptionsState<ISelectMenuItem>,
+  ) => options.filter((item) => item.label.toLowerCase().includes(state.inputValue.toLowerCase()));
+
+  const optionsFilter = customOptionsFilter ? customOptionsFilter : defaultOptionsFilter;
+
   return (
     <Controller
       name={name}
@@ -48,7 +68,7 @@ const AutocompleteFormField = (props: AutocompleteFormProps) => {
           disableClearable={disableClearable}
           getOptionLabel={(option: ISelectMenuItem) => option.label}
           getOptionDisabled={disableOptionsFunction}
-          filterOptions={(x) => x}
+          filterOptions={optionsFilter}
           renderOption={(props, option, state, ownerState) => (
             <Box
               sx={{
@@ -74,7 +94,7 @@ const AutocompleteFormField = (props: AutocompleteFormProps) => {
             />
           )}
           onChange={(_, data) => {
-            onChange(data.value);
+            if (data) onChange(data.value);
           }}
           isOptionEqualToValue={(option, value) => option.value === value.value}
           value={options.find((option) => option.value === getValues()[name]) ?? null}

From 18218925d3ac8b7723c868e7ab0211a93e7e2e1f Mon Sep 17 00:00:00 2001
From: dbarkowsky <dylanbarkowsky@gmail.com>
Date: Wed, 17 Apr 2024 09:24:47 -0700
Subject: [PATCH 2/2] Fix agency sorting in autocomplete options

---
 react-app/src/hooks/api/useGroupedAgenciesApi.ts | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/react-app/src/hooks/api/useGroupedAgenciesApi.ts b/react-app/src/hooks/api/useGroupedAgenciesApi.ts
index cc49ed931a..c775718418 100644
--- a/react-app/src/hooks/api/useGroupedAgenciesApi.ts
+++ b/react-app/src/hooks/api/useGroupedAgenciesApi.ts
@@ -52,12 +52,9 @@ export const useGroupedAgenciesApi = () => {
         children: agency.children.map((child) => child.Id),
       });
       if (agency.children && agency.children.length > 0) {
-        // Custom sorting logic for children agencies that contain numeric values
-        agency.children = agency.children.sort((a: Agency, b: Agency) => {
-          const numA = parseInt(a.Name.match(/\d+/)?.[0] || '0');
-          const numB = parseInt(b.Name.match(/\d+/)?.[0] || '0');
-          return numA - numB;
-        });
+        agency.children = agency.children.sort((a: Agency, b: Agency) =>
+          a.Name.localeCompare(b.Name, undefined, { numeric: true, sensitivity: 'base' }),
+        );
         agency.children.forEach((childAgency) => {
           options.push({
             label: childAgency.Name,