Dialog と DropdownMenu を使用した際に pointer-events: none; が消えない問題の解消

[h-yabi2]

現象について

• shadcn-ui の Dialog が開いている時に自動で pointer-events: none; が body に付与されるが、DropdownMenu と組みあわせて使用する際にこのCSSが削除されない不具合が出てしまう

解決方法

• 以下の参考にあるように <DropdownMenu modal={false}> のようにすると解消できる
• しかし、DropdownMenuContent 内にモーダルがある場合は、上記だとモーダルが開かなくなるので以下のようにする必要がある
• 参考： Dialog & DropdownMenu adds pointer-events: none; shadcn-ui/ui#1859

  const [isModalOpen, setModalOpen] = React.useState(true)
  const handleCloseModal = () => {
    closeModal()
    setModalOpen(false)
  }

  return (
    <Dialog open={modalState} modal={isModalOpen}>