From 4afca01eedff773654886ec42a2d88b99df53871 Mon Sep 17 00:00:00 2001
From: Shams mosowi <shams.mosowi@gmail.com>
Date: Tue, 28 Apr 2020 12:02:51 +0800
Subject: [PATCH] prevent multi select crashing

---
 www/src/components/MultiSelect/index.tsx      | 15 +++++---
 .../Table/formatters/MultiSelect.tsx          | 34 +++++++++++--------
 2 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/www/src/components/MultiSelect/index.tsx b/www/src/components/MultiSelect/index.tsx
index d4a11d11..2b967827 100644
--- a/www/src/components/MultiSelect/index.tsx
+++ b/www/src/components/MultiSelect/index.tsx
@@ -58,19 +58,24 @@ export default function MultiSelect({
     width: dropdownWidth,
   });
 
-  const sanitisedValue = value.filter(v => v?.length > 0);
+  const sanitisedValue = Array.isArray(value)
+    ? value.filter((v) => v?.length > 0)
+    : [value];
 
   // Transform `option` prop if it’s just strings
   let options =
     typeof optionsProp[0] === "string"
       ? (optionsProp as string[]).map(
-          item => ({ label: item, value: item } as OptionType)
+          (item) => ({ label: item, value: item } as OptionType)
         )
       : (optionsProp as OptionType[]);
   // If `freeText` enabled, show the user’s custom fields
   if (freeText) {
     // `value` prop is an array of all values. It removes labels
-    const formattedValues = sanitisedValue?.map(x => ({ label: x, value: x }));
+    const formattedValues = sanitisedValue?.map((x) => ({
+      label: x,
+      value: x,
+    }));
     options = _unionWith(
       options,
       formattedValues,
@@ -86,7 +91,7 @@ export default function MultiSelect({
       className={clsx(classes.root, className)}
       {...TextFieldProps}
       SelectProps={{
-        renderValue: value => {
+        renderValue: (value) => {
           const selected = value as string[];
           if (selected.length === 1 && typeof selected[0] === "string") {
             const selectedOption = _find(options, { value: selected[0] });
@@ -109,7 +114,7 @@ export default function MultiSelect({
           ...TextFieldProps.SelectProps?.MenuProps,
         },
       }}
-      ref={el => {
+      ref={(el) => {
         if (!el) return;
         const width = el.getBoundingClientRect().width;
         if (dropdownWidth < width) setDropdownWidth(width);
diff --git a/www/src/components/Table/formatters/MultiSelect.tsx b/www/src/components/Table/formatters/MultiSelect.tsx
index 7e146cf2..e38cb702 100644
--- a/www/src/components/Table/formatters/MultiSelect.tsx
+++ b/www/src/components/Table/formatters/MultiSelect.tsx
@@ -9,7 +9,7 @@ import FormattedChip from "components/FormattedChip";
 import { FieldType } from "constants/fields";
 import { useFiretableContext } from "contexts/firetableContext";
 
-const useStyles = makeStyles(theme =>
+const useStyles = makeStyles((theme) =>
   createStyles({
     root: {
       minWidth: 0,
@@ -63,23 +63,27 @@ export default function MultiSelect({
     ? (([value] as unknown) as string[])
     : value;
   // And support transforming array of strings back to string
-  const handleChange = value => onSubmit(isSingle ? value.join(", ") : value);
+  const handleChange = (value) => onSubmit(isSingle ? value.join(", ") : value);
 
   // Render chips
-  const renderValue = value => (
-    <Grid container spacing={1} wrap="nowrap" className={classes.chipList}>
-      {value?.map(
-        item =>
-          typeof item === "string" && (
-            <Grid item key={item}>
-              <FormattedChip label={item} className={classes.chip} />
-            </Grid>
-          )
-      )}
-    </Grid>
-  );
+  const renderValue = (value) => {
+    //if (Array.isArray(value))
+    return (
+      <Grid container spacing={1} wrap="nowrap" className={classes.chipList}>
+        {value?.map(
+          (item) =>
+            typeof item === "string" && (
+              <Grid item key={item}>
+                <FormattedChip label={item} className={classes.chip} />
+              </Grid>
+            )
+        )}
+      </Grid>
+    );
+    //  else
+  };
 
-  const onClick = e => e.stopPropagation();
+  const onClick = (e) => e.stopPropagation();
   const onClose = () => {
     if (dataGridRef?.current?.selectCell)
       dataGridRef.current.selectCell({ rowIdx, idx: column.idx });