ChakraUIのOnCloseがDrawer内で発火されない

結論

• OnClickイベントにOnClose関数も渡す

// Drawerの記述
            <Button
              onClick={() => {
                // 画面遷移イベント
                hoge();
                
                onClose();
              }}

原因

• Drawerに登録したonClose関数がonClick時には呼び出されていなかった
• 関数を渡す箇所が足りていなかったということ。。。

前提条件

• 以下のバージョンで確認

    "typescript": "^5.2.2"
    "vite": "^5.3.4"
    "react": "^18.3.1"
    "react-router-dom": "^6.26.0"
    "@chakra-ui/react": "^2.8.2"

事象

• propsで受け取った画面遷移関数をDrawerに登録し、DrawerのOnCloseにはuseDisclosureのonClose関数を登録済み

    <Drawer isOpen={isOpen} onClose={onClose}>

• Buttonを押下するとurlが変わり、レンダリングを行われているが、Drawerが閉じない

やったこと

• useNavigateの仕様確認
  • 画面遷移関数をuseNavigateで定義していため定義に誤りがなかったか確認
• onClose()で何が渡されるか確認
  • 私の予想ではイベントが発生したらisOpenをfalseに更新するようなことをするのではないかと予測していた
  • 確認したところだいたい同じようなことをしていた
• chatGPTに質問
  • OnClickイベントに登録できていないと回答された

感想

• 言われてみれば納得のいくものだった
• イベントの発火などから原因を考えられるようにならないといけないなと思いました