scrollToTop react

[Manubi]

Hi,

I have the problem that the modal is higher then the viewport. Instead of scrolling to the top of the modal as soon as it opens, it's already at the bottom of it.

I've tried it with a ref but it doesn't seem to work.

import { Dialog, Transition } from "@headlessui/react";
import { Fragment, useEffect, useRef } from "react";

export type ModalProps = {
  title?: string;
  modalOpen: boolean;
  setModalOpen(bool: boolean): void;
  children: React.ReactNode;
};

function Modal({ modalOpen, setModalOpen, title, children }: ModalProps) {
  const modalRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (modalOpen && modalRef.current) {
      modalRef.current.scrollTop = 0;
    }
  }, [modalOpen]);

  return (
    <Transition.Root show={modalOpen} as={Fragment}>
      <Dialog
        as="div"
        static
        className="fixed inset-0 z-50 overflow-y-auto"
        open={modalOpen}
        onClose={setModalOpen}
      >
        <div className="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <Dialog.Overlay className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
          </Transition.Child>

          {/* This element is to trick the browser into centering the modal contents. */}
          <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
            &#8203;
          </span>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            enterTo="opacity-100 translate-y-0 sm:scale-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
          >
            <div
              ref={modalRef}
              className="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
            >
              <div>
                <Dialog.Title
                  as="h3"
                  className="py-4 text-2xl font-medium leading-6 text-center text-primary h1-primary"
                >
                  {title}
                </Dialog.Title>
                <div className="px-2">
                  <div className="sm:flex sm:items-start">
                    <div className="text-center sm:mt-0 sm:mx-auto sm:text-left">{children}</div>
                  </div>
                </div>
              </div>
            </div>
          </Transition.Child>
        </div>
      </Dialog>
    </Transition.Root>
  );
}

export { Modal };

"@headlessui/react": "^1.7.17",

[Manubi]

can no one give me a hint? :)