Merge pull request #44 from upnotes-io/controlled-focus

Controlled focus

Author: bhujoshi

src/components/Todo/Todo.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import { Reorder } from "framer-motion";
 import { Container } from "@material-ui/core";
 
@@ -15,11 +15,13 @@ export interface TodoAppProps {
 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 itemsCopy = [...items];
     if (Array.isArray(item)) {
@@ -32,6 +34,11 @@ function TodoApp(props: TodoAppProps) {
       setItemsCallback([...itemsCopy]);
     }
   };
+
+  const changeFocus = useCallback((focusIndex: number) => {
+    setFocus(focusIndex);
+  },[])
+
   const completedItems = items.filter((item: TodoItem) => item.isComplete);
   const todoItems = items.filter((item: TodoItem) => !item.isComplete);
 
@@ -51,7 +58,7 @@ function TodoApp(props: TodoAppProps) {
 
   return (
     <Container>
-      <Form addItem={addItem} />
+      <Form addItem={addItem} changeFocus={changeFocus} />
       <Reorder.Group
         axis="y"
         values={items.map((item) => item.uuid)}
@@ -65,6 +72,8 @@ function TodoApp(props: TodoAppProps) {
               addItem={addItem}
               itemIndex={index}
               setItemsCallback={setItemsCallback}
+              changeFocus={changeFocus}
+              focus={focus}
             />
           );
         })}

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

@@ -12,6 +12,7 @@ import { TodoItem } from '../../types';
 
 export interface AddProps {
   addItem: (item: TodoItem | TodoItem[]) => void;
+  changeFocus:  (focusIndex: number) => void;
 }
 
 const useStyles = makeStyles({
@@ -26,7 +27,7 @@ const useStyles = makeStyles({
 
 export const Form = (props: AddProps) => {
   const classes = useStyles();
-  const { addItem } = props;
+  const { addItem, changeFocus } = props;
   const [itemName, setItemName] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -54,14 +55,16 @@ export const Form = (props: AddProps) => {
               return { name, uuid: uuid(), isComplete: false };
             });
             addItem(items);
+            changeFocus(items.length-1);
           }}
           onChange={(e) => {
             addItem({
               name: e.target.value,
               uuid: uuid(),
               isComplete: false,
             });
-            setItemName('');
+            changeFocus(0)
+            setItemName("");
           }}
           placeholder='Add item.'
           value={itemName}

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

@@ -52,14 +52,17 @@ interface Props {
   itemIndex: number;
   addItem: (item: TodoItem | TodoItem[]) => void;
   setItemsCallback: (updatedItems: TodoItem[]) => void;
+  changeFocus:  (focusIndex: number) => void;
+  focus: number;
 }
 
 export const Item: FC<Props> = ({
   items,
   itemIndex,
   setItemsCallback,
   addItem,
-  // handleArrowUpDown,
+  changeFocus,
+  focus
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const y = useMotionValue(0);
@@ -70,11 +73,13 @@ export const Item: FC<Props> = ({
   const [draggable, setDraggable] = useState(false);
 
   useEffect(() => {
-    items[itemIndex].name.length < 2 &&
+    if(focus === itemIndex){
       inputRef.current &&
       inputRef.current.focus();
+      changeFocus(-1);
+    }
     setItemText(items[itemIndex].name);
-  }, []);
+  }, [changeFocus, focus, itemIndex, items]);
 
   if (!items[itemIndex].isComplete) {
     return (
@@ -122,6 +127,7 @@ export const Item: FC<Props> = ({
                   return { name, uuid: uuid(), isComplete: false };
                 });
                 addItem(items);
+                changeFocus(-1);
               }}
               onChange={(e) => {
                 items[itemIndex].name = e.target.value;
@@ -130,10 +136,13 @@ export const Item: FC<Props> = ({
               onBlur={() => {
                 setItemsCallback([...items]);
               }}
-              onKeyPress={(e) =>
-                e.key === 'Enter' &&
-                itemIndex < 1 &&
-                addItem({ name: '', uuid: uuid(), isComplete: false })
+              onKeyPress={
+                (e) => {
+                  e.key === "Enter" &&
+                  itemIndex < 1 &&
+                  addItem({ name: "", uuid: uuid(), isComplete: false })
+                  changeFocus(-1)
+                }
               }
               onKeyDown={(e) => {
                 const inputs = document.querySelectorAll("input[type='text']");