chakra-ui v3でDrawerをクリックしてnavigateしても閉じない

はじめに

• chakra-ui v3でDrawerにリンクをつけていた

問題

• Buttonクリック時、リンク先には遷移するがドロワーが閉じなかった

<Drawer.Root
      placement="start"
      size="xs"
      open={open}
      onOpenChange={(e) => setOpen(e.open)}
    >
      <Drawer.Backdrop />
      <Drawer.Positioner>
        <Drawer.Content>
          <Drawer.Body padding={0} bg="gray.100">
            <Flex direction="column" textAlign="center">
                {/* クリックして遷移はするけど閉じない */}
                <Button
                  w="100%"
                  bg="gray.100"
                  color="black"
                  onClick={onClickUserManagement}
                >
                  ユーザー一覧
                </Button>
            </Flex>
          </Drawer.Body>
        </Drawer.Content>
      </Drawer.Positioner>
    </Drawer.Root>

解決

• Drawer.Trigger asChildでラップすると閉じた

<Drawer.Root
      placement="start"
      size="xs"
      open={open}
      onOpenChange={(e) => setOpen(e.open)}
    >
      <Drawer.Backdrop />
      <Drawer.Positioner>
        <Drawer.Content>
          <Drawer.Body padding={0} bg="gray.100">
            <Flex direction="column" textAlign="center">
              {/* 閉じた！嬉しい😃 */}
              <Drawer.Trigger asChild>
                <Button
                  w="100%"
                  bg="gray.100"
                  color="black"
                  onClick={onClickUserManagement}
                >
                  ユーザー一覧
                </Button>
              </Drawer.Trigger>
            </Flex>
          </Drawer.Body>
        </Drawer.Content>
      </Drawer.Positioner>
    </Drawer.Root>

終わりに

Use the provided child element as the default rendered element, combining their props and behavior.

asChildは書かないと↑ということで、書かない場合Drawerがbuttonタグとしてレンダリングされて、ハイドレーションエラーになった。

Drawer.Triggerの役割は使用例はあったので試したものの、明確にどういうものか書いている記述を見つけられなかった。根拠を明確にしたい場合、ソースコードを追うのが良いのだろうか。

動かすことに関しては、公式の信頼できるサンプルを一旦そのまま貼り付けてみて、動きを見るという方法をよく使っている。