Controlled focus

.eslintrc.js

@@ -16,6 +16,9 @@ module.exports = {
     ecmaVersion: "latest",
     sourceType: "module",
   },
-  plugins: ["react", "@typescript-eslint"],
-  rules: {},
+  plugins: ["react", "@typescript-eslint", "react-hooks"],
+  rules: {
+    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
+    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
+  },
 };

package.json

@@ -46,6 +46,7 @@
     "babel-loader": "^8.2.2",
     "eslint": "^8.24.0",
     "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "framer-motion": "^7.5.1",
     "jest": "^29.1.2",
     "jest-environment-jsdom": "^29.1.2",

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']");

yarn.lock

@@ -5809,6 +5809,11 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-plugin-react-hooks@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+
 eslint-plugin-react@^7.31.8:
   version "7.31.8"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.31.8.tgz#3a4f80c10be1bcbc8197be9e8b641b2a3ef219bf"