shadcn/uiを使っていて出くわしたバグと仕様について書きます。shadcn/uiが何かという詳細な説明は省きます。
何が起きたか
Shadcn/uiのDialogは簡単にダイアログを実装することができます。
shadcn/uiそのものはnpmのライブラリを持っているわけではなく、様々なライブラリのな組み合わせによって成り立っています。
Dialogについては npx shadcn@latest add dialog
で生成されたDaialogコンポーネントを参照するとわかるように、 @radix-ui/react-dialog
を使ってます。
MacでChromeを使っている方であれば、実際に上記Shadcn/uiのDialogのPreviewからダイアログを開いて見るとわかるように、トラックパッドによるピンチイン・ピンチアウトができません。(2024/12/4現在)
つまり、 ダイアログが開いた状態だとズームイン・ズームアウトができない ということです。
原因と解決策
解決するには @radix-ui/react-dialog
のバージョンを 1.1.2
にするだけでOKです。
実はこの問題はIssueがすでに存在おり原因も判明していて、つまるところ react-remove-scroll
のバグでした。
ただ、上記のIssueでは「react-remove-scrollのバグを修正してパッチを適用すればOK」という内容でした。
パッチを用いた解決策をプロダクトに適用して保守していくのは面倒なことになるなぁと思い、 react-remove-scrollに対してPRを出して修正→radix-ui/primitives もPRを出してバージョンアップしてもらいました。
この問題自体は英語でGithub内をググればみつかるのですが、shadcn/uiは依存するライブラリが多すぎて問題(Issue)がどこにあるか分かりづらいため、日本語でここに残しておきます。
なお、Shadcn/uiのドキュメントページが修正されていないのは個人的に気になりますので、どなたか修正PRを出していただけるとすごく助かります。
多分以下URLの "@radix-ui/react-dialog": "^1.1.1",
を 1.1.2
に変更するだけで問題ないと思います!!