chip as doc select time

src/components/Fields/DocSelect.tsx

@@ -4,6 +4,7 @@ import IconButton from "@material-ui/core/IconButton";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import { TextField } from "@material-ui/core";
 import Typography from "@material-ui/core/Typography";
+import Chip from "@material-ui/core/Chip";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -11,6 +12,7 @@ const useStyles = makeStyles((theme: Theme) =>
       position: "relative",
       display: "flex",
       flexWrap: "wrap",
+      alignItems: "center",
     },
     typography: {
       padding: theme.spacing(2),
@@ -20,6 +22,9 @@ const useStyles = makeStyles((theme: Theme) =>
       minWidth: 230,
     },
     paper: { minWidth: 200 },
+    chip: {
+      margin: theme.spacing(1),
+    },
   })
 );
 interface Props {
@@ -51,18 +56,34 @@ const DocSelect = (props: Props) => {
     setSearch((oldValues: any) => ({
       ...oldValues,
       collection: collectionPath,
-      anchorEl: event.currentTarget,
-      onSubmit: onSubmit,
+      config: config,
+      onSubmit: (value: any) => {
+        onSubmit([value]);
+      },
     }));
   };
-  // if (isScrolling) return <div />;
 
   return (
     <div className={classes.root}>
       <IconButton onClick={handleClick}>
         <SearchIcon />
       </IconButton>
-      <Typography>test</Typography>
+      {value &&
+        value.map((doc: any) => (
+          <Chip
+            label={config.primaryKeys.map(
+              (key: any) => `${doc.snapshot[key]} `
+            )}
+            //onClick={handleClick}
+            //onDelete={handleDelete}
+            className={classes.chip}
+          />
+        ))}
+      {/* <Typography>
+        {value[0]
+          ? config.primaryKeys.map((key: any) => `${value[0].snapshot[key]} `)
+          : ""}
+      </Typography> */}
     </div>
   );
 };

src/components/SearchBox.tsx

@@ -58,13 +58,14 @@ interface Props {
   searchData: {
     collection: string;
     onSubmit: Function | undefined;
+    config: any;
   };
   clearSearch: Function;
 }
 
 const SearchBox = (props: Props) => {
   const { searchData, clearSearch } = props;
-  const { collection, onSubmit } = searchData;
+  const { collection, onSubmit, config } = searchData;
   const [query, setQuery] = useState("");
   const classes = useStyles();
 
@@ -99,15 +100,25 @@ const SearchBox = (props: Props) => {
         delete snapshot._highlightResult;
         if (onSubmit) {
           onSubmit({ snapshot, docPath: `${collection}/${snapshot.objectID}` });
-          clearSearch();
-          setQuery("");
+          clear();
         }
       }}
     >
-      <ListItemText primary={hit.firstName} secondary={hit.lastName} />
+      <ListItemText
+        primary={
+          config && config.primaryKeys.map((key: string) => `${hit[key]} `)
+        }
+        secondary={
+          config && config.secondaryKeys.map((key: string) => `${hit[key]} `)
+        }
+      />
     </ListItem>
   );
-
+  const clear = async () => {
+    await setHits([]);
+    await setQuery("");
+    clearSearch();
+  };
   return (
     <Modal
       aria-labelledby="transition-modal-title"
@@ -115,8 +126,7 @@ const SearchBox = (props: Props) => {
       className={classes.modal}
       open={open}
       onClose={(event: any, reason: any) => {
-        clearSearch();
-        setQuery("");
+        clear();
       }}
       closeAfterTransition
       BackdropComponent={Backdrop}
@@ -127,6 +137,7 @@ const SearchBox = (props: Props) => {
       <Fade in={open}>
         <Paper>
           <TextField
+            autoFocus
             value={query}
             onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
               setQuery(e.target.value);