0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ぼっちアドベントカレンダー by bon10Advent Calendar 2024

Day 2

Mac環境にてShadcn/uiで作ったDialogをズームイン・ズームアウトする方法

Last updated at Posted at 2024-12-03

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 に変更するだけで問題ないと思います!!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?