shadcn/ui SheetContent 内で Popover を使う際の注意点

この記事は、shadcn/uiのSheetコンポーネントの内でPopoverを使用する際の注意点について解説します。

問題点

Sheetの中で、Calendarを用いて日付の入力を行おうとしたところ、カレンダーがクリックできないという現象に限りました。
z-index的な問題なのか表示はされるけどクリックができないのです。

これは、Popoverコンポーネントの表示を控えるmodalプロパティのデフォルト値が関係しています。
この値がfalseになっているため、Sheet内のイベントと交叉し、カレンダーの操作が不可能となっていました。

解決策

この問題は、Popoverコンポーネントに modal={true} を追加することで解決します。

<SheetContent>
  <Popover modal={true}>
    <PopoverTrigger asChild>
      <Button>日付を選択</Button>
    </PopoverTrigger>
    <PopoverContent>
      <Calendar />
    </PopoverContent>
  </Popover>
</SheetContent>

解説

modal={true} を設定することで、Popoverは表示中に他の要素と交互しないようになります。
これにより、Sheet内でも不具合なくPopoverを利用できるようになります。

この設定は、Calendar以外のPopoverを使用する際にも有効です。
たとえば、フォームやサブメニューのアイテム選択にも実用的に利用できます。

結論

shadcn/uiのSheet内でPopoverを使用する際は、modal={true} の設定を忘れずに追加しましょう。
これにより、ユーザー体験を向上させることができます。

参考