From d273706ef8f2cd2d197695260ecd12b4a31ed4bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dro=C5=84?= <dron.official@yahoo.com>
Date: Fri, 25 Mar 2022 13:46:43 +0100
Subject: [PATCH] Fix search permission groups at staff member edit page
 (#1937)

* Fix undefined choices in multi autocomplete select field

* Replace optional chaining with empty array default prop
---
 .../MultiAutocompleteSelectField.tsx                   |  2 +-
 .../MultiAutocompleteSelectFieldContent.tsx            | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
index 1c2ff039c..3c4d3aa6f 100644
--- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
+++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
@@ -241,7 +241,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
                             }
                           }
                         }
-                        choices={choices.filter(
+                        choices={choices?.filter(
                           choice => !value.includes(choice.value)
                         )}
                         displayCustomValue={displayCustomValue}
diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
index 2e4a70251..f4c8e69bd 100644
--- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
+++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
@@ -164,7 +164,7 @@ function getChoiceIndex(
 const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectFieldContentProps> = props => {
   const {
     add,
-    choices,
+    choices = [],
     displayCustomValue,
     displayValues,
     getItemProps,
@@ -199,7 +199,7 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
   }, [loading]);
 
   const hasValuesToDisplay =
-    displayValues.length > 0 || displayCustomValue || choices.length > 0;
+    displayValues?.length > 0 || displayCustomValue || choices.length > 0;
   return (
     <Paper className={classes.root} elevation={8}>
       {hasValuesToDisplay && (
@@ -243,9 +243,9 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
                 />
               </MenuItem>
             )}
-            {(choices.length > 0 || displayValues.length > 0) &&
+            {(choices.length > 0 || displayValues?.length > 0) &&
               displayCustomValue && <Hr className={classes.hr} />}
-            {displayValues.map(value => (
+            {displayValues?.map(value => (
               <MenuItem
                 className={classes.menuItem}
                 key={value.value}
@@ -266,7 +266,7 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
                 <span className={classes.menuItemLabel}>{value.label}</span>
               </MenuItem>
             ))}
-            {displayValues.length > 0 && choices.length > 0 && (
+            {displayValues?.length > 0 && choices.length > 0 && (
               <Hr className={classes.hr} />
             )}
             {choices.map((suggestion, index) => {