Add new todo item on pressing enter in between todo list rows

src/components/Todo/Todo.stories.tsx

@@ -7,12 +7,13 @@ export default {
   title: "Components/Todo",
   component: Todo,
   argTypes: {
-    defaultItems: [{name: "test it", isComplete: false, uuid: '1'}],
+    defaultItems: [{ name: "test it", isComplete: false, uuid: "1" }],
   },
 } as Meta;
 
 const Template: Story<TodoAppProps> = (args) => <Todo {...args} />;
 
 export const Example = Template.bind({});
-Example.args =  {defaultItems: [{name: "test it", isComplete: false, uuid: '1'}]}
-
+Example.args = {
+  defaultItems: [{ name: "test it", isComplete: false, uuid: "1" }],
+};

src/components/Todo/Todo.tsx

@@ -6,6 +6,8 @@ import { Item, TodoCompletedList } from "./common";
 import { Form } from "./common/Todo/Form";
 import { TodoItem } from "./common/types";
 
+import uuid from "react-uuid";
+
 export interface TodoAppProps {
   defaultItems?: TodoItem[];
   onChange: (items: TodoItem[]) => void;
@@ -15,29 +17,83 @@ function TodoApp(props: TodoAppProps) {
   const { defaultItems = [], onChange } = props;
   const [items, setItems] = useState<TodoItem[]>(defaultItems);
   const [focus, setFocus] = useState(-1);
-  
+
   const setItemsCallback = (updatedItems: TodoItem[]) => {
     setItems(updatedItems);
     onChange(updatedItems);
   };
 
-  const addItem = (item: TodoItem | TodoItem[]) => {
+  const changeFocus = useCallback((focusIndex: number) => {
+    setFocus(focusIndex);
+  }, []);
+
+  const addItem = (
+    item: TodoItem | TodoItem[],
+    cursorLocation?: number | null | undefined,
+    itemIndex?: number
+  ) => {
     const itemsCopy = [...items];
-    if (Array.isArray(item)) {
-      item.forEach((it) => {
-        itemsCopy.unshift(it);
-      });
-      setItemsCallback([...itemsCopy]);
+    //if we're typing in the "Add Item" input...
+    if (
+      typeof cursorLocation != "number" ||
+      Array.isArray(item) ||
+      itemIndex === undefined
+    ) {
+      if (Array.isArray(item)) {
+        item.forEach((it) => {
+          itemsCopy.unshift(it);
+        });
+        setItemsCallback([...itemsCopy]);
+      } else {
+        itemsCopy.unshift(item);
+        setItemsCallback([...itemsCopy]);
+      }
+      return;
+    }
+    // else if we are typing in any other input
+    let charsAfterCursor = "";
+    for (let i = cursorLocation; i < item.name.length; i++) {
+      charsAfterCursor += item.name[i];
+    }
+    let charsBeforeCursor = "";
+    for (let i = 0; i < cursorLocation; i++) {
+      charsBeforeCursor += item.name[i];
+    }
+    // do nothing if the field we are trying to Enter is blank
+    if (!charsBeforeCursor && !charsAfterCursor) return;
+    // split up names based on where cursor is when user clicks Enter
+    const beforeItem = {
+      name: charsBeforeCursor,
+      uuid: uuid(),
+      isComplete: false,
+    };
+    const afterItem = {
+      name: charsAfterCursor,
+      uuid: uuid(),
+      isComplete: false,
+    };
+    // insert both halves of the input into the itemsCopy array
+    itemsCopy.splice(itemIndex, 1, beforeItem, afterItem);
+    // set items with updated array
+    setItemsCallback([...itemsCopy]);
+    // after enter is hit, re-position the cursor depending on where in the input it is
+    if (!charsBeforeCursor) {
+      changeFocus(itemsCopy.indexOf(beforeItem));
     } else {
-      itemsCopy.unshift(item);
-      setItemsCallback([...itemsCopy]);
+      setTimeout(() => {
+        const inputs = document.querySelectorAll("input[type='text']");
+        const inputsArray = Array.from(inputs);
+        const nextInputElement = inputsArray[
+          itemsCopy.indexOf(afterItem) + 1
+        ] as HTMLInputElement;
+        changeFocus(itemsCopy.indexOf(afterItem));
+        requestAnimationFrame(() => {
+          nextInputElement.setSelectionRange(0, 0);
+        });
+      }, 0);
     }
   };
 
-  const changeFocus = useCallback((focusIndex: number) => {
-    setFocus(focusIndex);
-  },[])
-
   const completedItems = items.filter((item: TodoItem) => item.isComplete);
   const todoItems = items.filter((item: TodoItem) => !item.isComplete);
 
@@ -77,7 +133,7 @@ function TodoApp(props: TodoAppProps) {
           );
         })}
       </Reorder.Group>
-      <TodoCompletedList 
+      <TodoCompletedList
         items={items}
         setItemsCallback={setItemsCallback}
         completedItems={completedItems}

src/components/Todo/common/Todo/CompletedList/index.tsx

@@ -1,10 +1,5 @@
 import React, { FC } from "react";
-import { 
-  Checkbox, 
-  Container, 
-  makeStyles,
-  Typography
-} from "@material-ui/core";
+import { Checkbox, Container, makeStyles, Typography } from "@material-ui/core";
 import { Accordion } from "../../Accordion";
 import { TodoItem } from "../../types";
 
@@ -17,7 +12,7 @@ const useStyles = makeStyles({
     textDecorationLine: "line-through",
     textDecorationStyle: "solid",
     padding: "10px 0px 7px",
-  }
+  },
 });
 
 export interface TodoCompletedItemProps {
@@ -53,7 +48,6 @@ export const TodoCompletedItem: FC<TodoCompletedItemProps> = ({
   return null;
 };
 
-
 export interface TodoCompletedListProps {
   items: TodoItem[];
   completedItems: TodoItem[];
@@ -63,24 +57,24 @@ export interface TodoCompletedListProps {
 export const TodoCompletedList: FC<TodoCompletedListProps> = ({
   completedItems,
   items,
-  setItemsCallback
+  setItemsCallback,
 }) => {
   const completedItemsLength = completedItems.length;
 
-  if(completedItemsLength === 0) return null;
+  if (completedItemsLength === 0) return null;
 
   return (
-      <Accordion title={`${completedItemsLength} Completed items`}>
-        {items.map((item, index) => {
-              return (
-                <TodoCompletedItem
-                  items={items}
-                  key={item.uuid}
-                  itemIndex={index}
-                  setItemsCallback={setItemsCallback}
-                />
-              );
-        })}
-      </Accordion>
-  )
-}
+    <Accordion title={`${completedItemsLength} Completed items`}>
+      {items.map((item, index) => {
+        return (
+          <TodoCompletedItem
+            items={items}
+            key={item.uuid}
+            itemIndex={index}
+            setItemsCallback={setItemsCallback}
+          />
+        );
+      })}
+    </Accordion>
+  );
+};

src/components/Todo/common/Todo/Form/index.tsx

@@ -11,7 +11,10 @@ import {
 import { TodoItem } from "../../types";
 
 export interface AddProps {
-  addItem: (item: TodoItem | TodoItem[]) => void;
+  addItem: (
+    item: TodoItem | TodoItem[],
+    cursorLocation?: number | null | undefined
+  ) => void;
   changeFocus: (focusIndex: number) => void;
 }
 
@@ -68,8 +71,13 @@ export const Form = (props: AddProps) => {
             changeFocus(items.length - 1);
           }}
           onChange={(e) => {
-
-            setItemName(e.target.value);
+            addItem({
+              name: e.target.value,
+              uuid: uuid(),
+              isComplete: false,
+            });
+            changeFocus(0);
+            setItemName("");
           }}
           placeholder="Add item."
           value={itemName}