0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[shadcn/ui]モバイル画面においてSidebarTriggerでサイドバーを開くと発生するエラーへの対処

Posted at

初投稿です

shadcn/uiのsidebarコンポーネントを初めて使ってみたのですが、使用開始早々にエラーが。

画面をモバイル幅にすると非表示になるサイドバーを、SidebarTriggerで開くと..

terminal
console error

DialogContent requires a DialogTitle for the component to be accessible for screen reader users.

If you want to hide the DialogTitle, you can wrap it with our VisuallyHidden component.

DialogContents内にTitleを設定しろということですが、そもそもダイアログコンポーネントは使用してないはず...。

あれこれ探した結果

ui/sidebar.tsx
const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    side?: "left" | "right";
    variant?: "sidebar" | "floating" | "inset";
    collapsible?: "offcanvas" | "icon" | "none";
  }...

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  if (isMobile) {
      return (
        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+         <SheetTitle className="hidden"></SheetTitle>
          <SheetContent
            data-sidebar="sidebar"
            data-mobile="true"
            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
              } as React.CSSProperties
            }
            side={side}
          >
            <div className="flex h-full w-full flex-col">{children}</div>
          </SheetContent>
        </Sheet>
      );
    }

これだけで解決しました

コンパイルの過程でDialogとSheetは統合されるのかな?と思いつつも、

治ったからいいや!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?