enhancement: adding options

src/components/Table/ColumnEditor/SelectOptionsInput.tsx

@@ -1,13 +1,20 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import Chip from "@material-ui/core/Chip";
 import { TextField, Grid, Divider } from "@material-ui/core";
 import _includes from "lodash/includes";
 import _camelCase from "lodash/camelCase";
 
+import AddIcon from "@material-ui/icons/AddCircle";
+import IconButton from "@material-ui/core/IconButton";
+import InputAdornment from "@material-ui/core/InputAdornment";
 const useStyles = makeStyles(Theme =>
   createStyles({
-    root: {
+    root: {},
+    field: {
+      width: "100%",
+    },
+    chipsContainer: {
       display: "flex",
       justifyContent: "center",
       flexWrap: "wrap",
@@ -23,10 +30,13 @@ const useStyles = makeStyles(Theme =>
 export default function SelectOptionsInput(props: any) {
   const { options, setValue } = props;
   const classes = useStyles();
-
-  const handleAdd = (newOption: string) => {
+  const [newOption, setNewOption] = useState("");
+  const handleAdd = () => {
     // setOptions([...options, newOption]);
-    setValue("options", [...options, newOption]);
+    if (newOption !== "") {
+      setValue("options", [...options, newOption]);
+      setNewOption("");
+    }
   };
   const handleDelete = (optionToDelete: string) => () => {
     const newOptions = options.filter(
@@ -43,17 +53,35 @@ export default function SelectOptionsInput(props: any) {
     <Grid container direction="column" className={classes.root}>
       <Grid item>
         <TextField
+          value={newOption}
+          className={classes.field}
           label="New Option"
+          onChange={e => {
+            setNewOption(e.target.value);
+          }}
           onKeyPress={(e: any) => {
-            const value = e.target.value;
             if (e.key === "Enter") {
-              handleAdd(value);
-              e.target.value = "";
+              handleAdd();
             }
           }}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  edge="end"
+                  aria-label="toggle password visibility"
+                  onClick={(e: any) => {
+                    handleAdd();
+                  }}
+                >
+                  {<AddIcon />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
         />
       </Grid>
-      <Grid item>
+      <Grid item className={classes.chipsContainer}>
         {options.map((option: string) => {
           return (
             <Chip