down arrow works for search

web/src/components/ui/dropdown/Dropdown.stories.tsx

@@ -446,6 +446,23 @@ export const WithLinks: Story = {
   }
 };
 
+export const WithManyItemsToSearch: Story = {
+  args: {
+    menuHeader: 'Search items...',
+    items: [
+      ...Array.from({ length: 100 }).map(() => {
+        const product = faker.commerce.productAdjective() + ' ' + faker.commerce.product();
+        return {
+          value: product + ' ' + faker.string.uuid(),
+          label: product
+        };
+      })
+    ],
+    onSelect: fn(),
+    children: <Button>Menu with Many Items</Button>
+  }
+};
+
 // Interactive example with links and multiple selection
 export const WithLinksAndMultipleSelection: Story = {
   render: () => {

web/src/components/ui/dropdown/Dropdown.tsx

@@ -585,6 +585,14 @@ const DropdownMenuHeaderSearch = <T,>({
       e.preventDefault();
       const index = parseInt(e.key);
       onSelectItem?.(index);
+    } else if (e.key === 'ArrowDown') {
+      // Find the first dropdown item and focus it
+      const menuItems = document.querySelectorAll('[role="menuitem"]');
+      if (menuItems.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        (menuItems[0] as HTMLElement).focus();
+      }
     } else {
       e.stopPropagation();
     }