Integration with Headless UI popover not working as expected.

[er-santosh]

I have implemented a infinite scroll with a popover of https://headlessui.com/react/popover and infiniteReactQuery. Whenever i scroll the popover content the next prop is not called instead it is called when i scroll the whole page. I have used the scrollableTarget with id and useRef too but no luck. Is there anyway to handle this. I can provide the code snippet.

<Popover className={"relative"}> {({ close }) => ( <> <Popover.Button className={ "focus:outline-none relative flex items-center justify-center" }> <div className="hidden laptop:inline-flex"> <BellIcon /> </div> <div className="laptop:hidden"> <BellSmallIcon /> </div> <span className="absolute -top-2 -right-2 laptop:top-0 laptop:right-0 flex items-center justify-center rounded-full text-white h-5 w-5 laptop:h-[25px] laptop:w-[25px] bg-gradient-to-r from-seafoam to-aquaBlue"> {queryData?.notifications?.length || 0} </span> </Popover.Button> <Transition enter="transition ease-out duration-200" enterFrom="opacity-0 translate-y-1" enterTo="opacity-100 translate-y-0" leave="transition ease-in duration-150" leaveFrom="opacity-100 translate-y-0" leaveTo="opacity-0 translate-y-1"> {" "} <Popover.Panel ref={scrollableDivRef} className="absolute w-[320px] tablet:w-[400px] right-0 max-h-[550px] overflow-y-auto scrollbar-hide z-10 px-4 pb-4 transform bg-white shadow-large rounded-normal"> <InfiniteScroll dataLength={queryData ? queryData?.notifications.length : 0} next={() => { fetchNextPage(); }} hasMore={!!hasNextPage} loader={<FetchingLoader />} scrollableTarget={scrollableDivRef.current as ReactNode}> {queryData?.notifications && queryData?.notifications?.length ? ( <> {(queryData?.notifications as INotification[])?.map( (notification, key) => ( <button key={key} onClick={close} className={twMerge( "shadow-medium group rounded-normal bg-white pl-[27px] pr-5 py-[15px] flex items-center space-x-[19px] w-full mt-2" )}> {/* <div className={ "h-[50px] relative w-[50px] rounded-normal shadow-large group-hover:text-primary bg-[#D8EEFF] flex items-center justify-center fill text-black" }> <NextImage alt={"notification"} src={"/assets/icons/BellSmall.svg"} className="w-6 h-6 mt-1 ml-1" /> </div> */} <div className="flex items-end justify-between flex-1"> <div className="flex items-end justify-between flex-1 text-[11px] leading-[16.5px] tablet:text-sm desktop:text-base"> <div className="w-full"> <h2 className="text-start font-medium text-[#0B0320] flex items-center space-x-3"> <span>{notification.title}</span> </h2> <div className="flex items-end justify-between mt-2"> <p className="text-start text-[8px] leading-[12px] tablet:text-xs desktop:text-sm"> {notification.message} </p> <h3 className="text-end text-[#19163D] font-medium min-w-max ml-[28px]"> { formatDateToNepaTZ( notification.created_at )?.date } </h3> </div> </div> </div> </div> </button> ) )} </> ) : ( <p className="py-10 font-medium text-center tablet:text-base"> No notifications found{" "} </p> )} </InfiniteScroll> </Popover.Panel> </Transition> </> )} </Popover>