From 350314cee84bce94c0fa7b2efe4b62831bc7d3ab Mon Sep 17 00:00:00 2001
From: "@mrubens" <2600+mrubens@users.noreply.github.com>
Date: Sat, 19 Sep 2026 14:28:01 +0000
Subject: [PATCH] fix: allow scrolling searchable model lists in dialogs

---
 .../tasks/ModelSelect.search.client.test.tsx  | 30 +++++++++++++++++++
 apps/web/src/components/tasks/ModelSelect.tsx |  2 +-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/tasks/ModelSelect.search.client.test.tsx b/apps/web/src/components/tasks/ModelSelect.search.client.test.tsx
index 9f5df57d13..4459bd2cf4 100644
--- a/apps/web/src/components/tasks/ModelSelect.search.client.test.tsx
+++ b/apps/web/src/components/tasks/ModelSelect.search.client.test.tsx
@@ -1,5 +1,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
+import { Dialog, DialogContent, DialogTitle } from '@/components/system';
+
 const launchModels = vi.hoisted(() => ({
   data: undefined as
     | {
@@ -150,6 +152,34 @@ describe('ModelSelect real controls', () => {
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   });
 
+  it('allows wheel scrolling when portaled from a modal dialog', async () => {
+    render(
+      <Dialog open>
+        <DialogContent aria-describedby={undefined}>
+          <DialogTitle>Choose a model</DialogTitle>
+          <ModelSelect onValueChange={vi.fn()} />
+        </DialogContent>
+      </Dialog>,
+    );
+    fireEvent.click(screen.getByRole('combobox'));
+
+    const list = screen.getByRole('listbox');
+    Object.defineProperties(list, {
+      clientHeight: { configurable: true, value: 300 },
+      scrollHeight: { configurable: true, value: 600 },
+    });
+    const wheelEvent = new WheelEvent('wheel', {
+      bubbles: true,
+      cancelable: true,
+      deltaY: 100,
+    });
+
+    await waitFor(() => {
+      screen.getAllByRole('option')[0]?.dispatchEvent(wheelEvent);
+      expect(wheelEvent.defaultPrevented).toBe(false);
+    });
+  });
+
   it('preserves the trigger label, selected default label and empty label', () => {
     const { rerender } = render(
       <ModelSelect
diff --git a/apps/web/src/components/tasks/ModelSelect.tsx b/apps/web/src/components/tasks/ModelSelect.tsx
index 6cc4a5aa43..b4bfc8b405 100644
--- a/apps/web/src/components/tasks/ModelSelect.tsx
+++ b/apps/web/src/components/tasks/ModelSelect.tsx
@@ -88,7 +88,7 @@ export function ModelSelect({
     const selectedModel = data.models.find((model) => model.id === value);
 
     return (
-      <Popover open={open} onOpenChange={setOpen}>
+      <Popover modal open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button
             type="button"