The Sheet Component, after closing the sheet it always make unexpect scrolling down.

[PrinOrange]

I have make a table of content component (TOC) for heading anchor with the Sheet Component.

However, when I click the Link and anchor to the specified heading, the page is always forced to scroll to the bottom.

a.mp4

Is there any way to prevent the page from scrolling when the Sheet exits, but to stay at the original place?

My environment is Next.js 14.0.1, Edge 116+.
The Sheet is created by shadcn CLI and do not make any change.

Thank you very much

My usage

.... // some imports

export const FloatTOC = (props: { data: TTOCItem[] }) => {
  return (
    <Sheet>
      <SheetTrigger>
        <div className="bottom-7 right-2 fixed">
          <MdMenuBookIcon className="w-12 h-12" />
        </div>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>{"TABLE OF CONTENTS"}</SheetTitle>
        </SheetHeader>
        <div className="m-5 rounded-md border-2">
          <ul className="flat-scrollbar flex flex-col h-[60vh] overflow-y-auto">
            {props.data?.map((item) => (
              <SheetClose key={`toc-${item.anchorId}`} asChild>
                <Link className="hover:text-sky-500" href={`#${item.anchorId}`}>
                  <li
                    className="my-2 text-sm target:text-blue-500"
                    style={{ paddingLeft: `${item.level - 1}em` }}
                  >{`${item.title}`}</li>
                </Link> 
              </SheetClose>  // I wrap the Link with <SheetClose> for closing the sheet after anchoring headings here.
            ))}
          </ul>
        </div>
      </SheetContent>
    </Sheet>
  );
};

[onurhan1337]

I'm not sure about it's will be fix your issue but you could try.

In this example, when the link is clicked, event.preventDefault() prevents the default action (scrolling to the anchor), and then element.scrollIntoView({ behavior: 'smooth' }) manually scrolls to the element with the corresponding ID.

<Link
  className="hover:text-sky-500"
  href={`#${item.anchorId}`}
  onClick={(event) => {
    event.preventDefault();
    const element = document.getElementById(item.anchorId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }}
>
  <li
    className="my-2 text-sm target:text-blue-500"
    style={{ paddingLeft: `${item.level - 1}em` }}
  >
    {`${item.title}`}
  </li>
</Link>

[PrinOrange]

Thank you very much for your ardent help.
I have tried your solution and make subtle improvements then it works, although it's just a temporary solution.
I have give up using the <SheetTrigger> and <SheetClose> to control whether open the Sheet, and replace it with useState usage

const [isTOCOpen, setIsTOCOpen] = useState(false);
return (
        <Sheet open={isTOCOpen}>
              <Link
                className="hover:text-sky-500"
                onClick={(e) => {
                  setIsTOCOpen(false);
                }}
                key={`toc-${item.anchorId}`}
                href={`#${item.anchorId}`}
              >
                <li
                  className="my-2 text-sm target:text-blue-500"
                  style={{ paddingLeft: `${item.level - 1}em` }}
                >{`${item.title}`}</li>
              </Link>
...

[onurhan1337]

I'm so glad to hear that 🙌

[BadgerHobbs]

I have just faced a similar problem (though using chadcn-vue), my solution was to place the sheet in the absolute center.

This works because the position of the sheet content is not relative to the parent sheet element, so that element (which is what is scrolled to) can be positioned in the center of the page without impacting the content. Scroll position won't change if it's always at the center of the screen.

<style>
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

<div class="absolute-center">
  <Sheet>
    <SheetTrigger>
      <div id="programaticallyClickedTrigger"></div>
    </SheetTrigger>
    <SheetContent></SheetContent>
  </Sheet>
</div>

<script>
// open sheet
document.getElementById("programaticallyClickedTrigger").click()
<script/>

My my Vue3 implementation my sheet trigger contains an empty div, which is clicked on a callback (in my case by a context menu).

[ahmedkhabar]

Hi again, Finally I find the solution for this error, to solve this error, open the sheet component file, and go to "SheetPrimitive.Content" then add this code : onCloseAutoFocus={event => event.preventDefault()}

[xtian777x]

This did the trick for me. Thank you so much!

[dbenavi5]

What exactly is this fixing?

[xtian777x]

What exactly is this fixing?

@dbenavi5 my problem was that I was using a drawer to show the mobile navbar that appeared when clicking the hamburger button. So it displayed the different menu options, which where just anchors on the same page, and the problem was that, e.g. if I clicked the "about us" option, I would see behind the drawer that the website was scrolling down to the about us section but when I closed the menu (i.e. drawer), the website would scroll up back to the top section.

Probably my explanation is crap LOL and a video would be better so let me know if it was not clear and I'll try to remove the fix and record the screen to show you the actual bug

[ankitarima]

It works like a charm 🚀

[NenadBanjeglav]

You are a CHAD!