bug fix on task component

db.json

@@ -6,12 +6,12 @@
       "id": 1
     },
     {
-      "title": "helloxxsxsxsxsxsxsxsxsxsxsxsxsxssssssssssssssssssssxssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssadddadsdsdsadasasasadasaadadadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaavrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyy",
+      "title": "helloxxsxsxsxsxsxsxsxsxsxsxsxsxssssssssssssssssssssxssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssadddadsdsdsadasasasadasaadadadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaavrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyyrt",
       "isCompleted": false,
       "id": 2
     },
     {
-      "title": "hello",
+      "title": "rfrfrfredefefefefffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
       "isCompleted": false,
       "id": 3
     }

src/components/top-level/task/index.js

 import { FaTimesCircle } from "react-icons/fa";
 import Checkbox from "../../base/checkbox";
 import "./task.css";
-import {
-  useEffect,
-  useRef,
-  useLayoutEffect,
-  useState,
-  useCallback,
-} from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 
 function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
   const [debouncetitle, setDebounceTitle] = useState(title);
@@ -23,6 +17,8 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
     }
     return false;
   };
+
+  // (useCallback)---> to avoid calling the checkbox component without any action applied on checkbox
   const handleChange = useCallback(() => {
     setIsCheck(!ischeck);
     onChange({ id, isCompleted: !ischeck });
@@ -31,6 +27,7 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
   const handleContent = (e) => {
     setDebounceTitle(e.target.value);
     const textarea = document.querySelector("textarea");
+    //calculate the height of content  based on scrollheight
     textarea.addEventListener("keyup", (e) => {
       let scheight = e.target.scrollHeight;
       textarea.style.height = `${scheight}px`;
@@ -39,6 +36,11 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
 
   //debounce
   useEffect(() => {
+    //checking the content height and set on page load
+    const scrollHeight = textarea_ref.current.scrollHeight;
+    textarea_ref.current.style.height = `${scrollHeight}px`;
+
+    //after 2 second it will execute
     const handler = setTimeout(() => {
       if (textarea_ref.current.value != title) {
         onChange({ id, title: debouncetitle });
@@ -50,10 +52,6 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
     };
   }, [debouncetitle]);
 
-  useLayoutEffect(() => {
-    const scrollHeight = textarea_ref.current.scrollHeight;
-    textarea_ref.current.style.height = `${scrollHeight}px`;
-  }, [debouncetitle]);
   return (
     <div className="task-section">
       <div>
@@ -69,7 +67,7 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
           contentEditable={true}
           value={debouncetitle}
           onChange={handleContent}
-          disabled={ischeck}
+          // disabled={ischeck}
         ></textarea>
       </div>
       <FaTimesCircle className="fa-close" onClick={handleDelete} />

src/components/top-level/task/task.css

@@ -10,7 +10,7 @@
 .task-section > div {
   display: flex;
   align-items: center;
-  width: 50%;
+  width: 90%;
 }
 .fa-close {
   color: #ccc;