diff --git a/src/Common/hooks/useIsScrollable.ts b/src/Common/hooks/useIsScrollable.ts index 642e628873d..a98da469c2f 100644 --- a/src/Common/hooks/useIsScrollable.ts +++ b/src/Common/hooks/useIsScrollable.ts @@ -1,6 +1,6 @@ import { useState, useRef, useEffect } from "react"; -const useIsScrollable = () => { +const useIsScrollable = (deps?: unknown[]) => { const [isScrollable, setIsScrollable] = useState(false); const ref = useRef(null); @@ -27,7 +27,7 @@ const useIsScrollable = () => { return () => { div?.removeEventListener("scroll", handleScroll); }; - }, [ref.current]); // Re-run effect if divRef.current changes + }, [ref.current, ...(deps || [])]); // Re-run effect if divRef.current changes return { isScrollable, ref }; }; diff --git a/src/Components/Medicine/MedicineAdministrationSheet/index.tsx b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx index 5aaf6ba4969..09e4c928140 100644 --- a/src/Components/Medicine/MedicineAdministrationSheet/index.tsx +++ b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx @@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next"; import useSlug from "../../../Common/hooks/useSlug"; import useQuery from "../../../Utils/request/useQuery"; import MedicineRoutes from "../routes"; -import { useEffect, useMemo, useRef, useState } from "react"; +import { useMemo, useState } from "react"; import { computeActivityBounds } from "./utils"; import useBreakpoints from "../../../Common/hooks/useBreakpoints"; import SubHeading from "../../../CAREUI/display/SubHeading"; @@ -25,8 +25,6 @@ const MedicineAdministrationSheet = ({ readonly, is_prn }: Props) => { const { t } = useTranslation(); const consultation = useSlug("consultation"); - const { isScrollable, ref } = useIsScrollable(); - const [showDiscontinued, setShowDiscontinued] = useState(false); const filters = { is_prn, prescription_type: "REGULAR", limit: 100 }; @@ -62,16 +60,7 @@ const MedicineAdministrationSheet = ({ readonly, is_prn }: Props) => { defaultEnd: true, }); - const divRef = useRef(null); - - useEffect(() => { - if (divRef.current) { - const isScrollable = - divRef.current.scrollHeight > divRef.current.clientHeight; - - console.log(`Is div scrollable? ${isScrollable ? "Yes" : "No"}`); - } - }, [prescriptions]); + const { isScrollable, ref } = useIsScrollable([data?.results?.length]); return (