From 8e4ca55560d27f3042ee42f15ea9cb3024911748 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Fri, 12 May 2023 16:12:09 +0000
Subject: [PATCH] feat(ControlledAutocomplete): filter by value too

---
 .../src/components/ControlledAutocomplete/index.tsx   | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/ControlledAutocomplete/index.tsx b/packages/web/src/components/ControlledAutocomplete/index.tsx
index b303e286..cc44ca19 100644
--- a/packages/web/src/components/ControlledAutocomplete/index.tsx
+++ b/packages/web/src/components/ControlledAutocomplete/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import FormHelperText from '@mui/material/FormHelperText';
-import Autocomplete, { AutocompleteProps } from '@mui/material/Autocomplete';
+import Autocomplete, { AutocompleteProps, createFilterOptions } from '@mui/material/Autocomplete';
 import Typography from '@mui/material/Typography';
 import type { IFieldDropdownOption } from '@automatisch/types';
 
@@ -18,6 +18,14 @@ interface ControlledAutocompleteProps
 const getOption = (options: readonly IFieldDropdownOption[], value: string) =>
   options.find((option) => option.value === value) || null;
 
+// Enables filtering by value in autocomplete dropdown
+const filterOptions = createFilterOptions<IFieldDropdownOption>({
+  stringify: ({ label, value }) => `
+    ${label}
+    ${value}
+  `
+})
+
 function ControlledAutocomplete(
   props: ControlledAutocompleteProps
 ): React.ReactElement {
@@ -75,6 +83,7 @@ function ControlledAutocomplete(
             {...autocompleteProps}
             {...field}
             options={options}
+            filterOptions={filterOptions}
             value={getOption(options, field.value)}
             onChange={(event, selectedOption, reason, details) => {
               const typedSelectedOption =