😎

shadcnのDialog上でSelectを使うと、Selectの候補が多いときにスクロールできない問題

に公開

1分まとめ

https://github.com/shadcn-ui/ui/issues/1175#issuecomment-2228543893

Dialogを以下のように書き換える

before

  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content 
    ...
    </DialogPrimitive.Content>
  </DialogPortal>

after

  <DialogPortal>
    <DialogOverlay>
      <DialogPrimitive.Content 
      ...
      </DialogPrimitive.Content>
    </DialogOverlay>
  </DialogPortal>
))

困ったこと

画像のようにダイアログを開いた中で、Selectコンポーネントを実装すると、選択肢が多いときにスクロールできないバグがある。

ダイアログ以外の場所ではスクロールできるため、発覚しずらいバグで困った。

Discussion