fix: goal edit modal not placed properly above on screen keyboard

src/components/GoalsComponents/GoalConfigModal/ConfigGoal.tsx

@@ -28,6 +28,7 @@ import CustomDatePicker from "./components/CustomDatePicker";
 import HintToggle from "./components/HintToggle";
 import useVirtualKeyboardOpen from "../../../hooks/useVirtualKeyBoardOpen";
 import ArchivedAutoComplete from "./components/ArchivedAutoComplete";
+import useOnScreenKeyboardScrollFix from "./useOnScreenKeyboardScrollFix";
 
 const onDays = [...calDays.slice(1), "Sun"];
 
@@ -63,6 +64,7 @@ const ConfigGoal = ({ type, goal, mode }: { type: TGoalCategory; mode: TGoalConf
   const addGoalSound = new Audio(plingSound);
 
   const isKeyboardOpen = useVirtualKeyboardOpen();
+  useOnScreenKeyboardScrollFix();
 
   const setShowToast = useSetRecoilState(displayToast);
 

src/components/GoalsComponents/GoalConfigModal/useOnScreenKeyboardScrollFix.ts

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+
+const useOnScreenKeyboardScrollFix = () => {
+  useEffect(() => {
+    const handleScroll = () => {
+      window.scrollTo(0, 0);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+};
+
+export default useOnScreenKeyboardScrollFix;

src/hooks/useVirtualKeyBoardOpen.tsx

@@ -3,11 +3,14 @@ import { useState, useEffect } from "react";
 function useVirtualKeyboardOpen() {
   const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
   const initialHeight = useState(window.visualViewport?.height || 0)[0];
+  const [currentHeight, setCurrentHeight] = useState(window.visualViewport?.height || 0);
 
   useEffect(() => {
     const onResize = () => {
-      const currentHeight = window.visualViewport?.height || 0;
-      if (currentHeight < initialHeight * 0.75) {
+      const newHeight = window.visualViewport?.height ?? 0;
+      setCurrentHeight(newHeight);
+
+      if (newHeight < initialHeight * 0.75) {
         setIsKeyboardOpen(true);
       } else {
         setIsKeyboardOpen(false);
@@ -19,8 +22,9 @@ function useVirtualKeyboardOpen() {
     return () => {
       window.removeEventListener("resize", onResize);
     };
-  }, [initialHeight]);
+  }, [initialHeight, currentHeight]);
 
   return isKeyboardOpen;
 }
+
 export default useVirtualKeyboardOpen;