From 28c9c7d3ec5efcd177bbacf71eb9aa4d7e19d882 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@umami.is>
Date: Fri, 6 Feb 2026 02:46:38 -0800
Subject: [PATCH] Fix Select component usage by removing items prop and render
 functions.

Replace render function children with mapped ListItem elements and remove
the unsupported items prop across all Select instances.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/(main)/teams/TeamMemberAddForm.tsx        |  2 +-
 .../(reports)/journeys/JourneysPage.tsx           |  1 -
 .../[websiteId]/compare/CompareTables.tsx         |  1 -
 src/components/common/FilterRecord.tsx            | 15 +++++----------
 src/components/input/CurrencySelect.tsx           |  1 -
 src/components/input/UserSelect.tsx               |  7 +++++--
 src/components/input/WebsiteSelect.tsx            |  9 ++++++---
 7 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/app/(main)/teams/TeamMemberAddForm.tsx b/src/app/(main)/teams/TeamMemberAddForm.tsx
index 9ea2ae0dd..d929364eb 100644
--- a/src/app/(main)/teams/TeamMemberAddForm.tsx
+++ b/src/app/(main)/teams/TeamMemberAddForm.tsx
@@ -55,7 +55,7 @@ export function TeamMemberAddForm({
         <UserSelect teamId={teamId} />
       </FormField>
       <FormField name="role" label={formatMessage(labels.role)} rules={{ required: 'Required' }}>
-        <Select items={roles} renderValue={value => renderRole(value as any)}>
+        <Select renderValue={value => renderRole(value as any)}>
           {roles.map(value => (
             <ListItem key={value} id={value}>
               {renderRole(value)}
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/journeys/JourneysPage.tsx b/src/app/(main)/websites/[websiteId]/(reports)/journeys/JourneysPage.tsx
index f1a8976f6..c8276edca 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/journeys/JourneysPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/(reports)/journeys/JourneysPage.tsx
@@ -40,7 +40,6 @@ export function JourneysPage({ websiteId }: { websiteId: string }) {
       <WebsiteControls websiteId={websiteId} />
       <Grid columns="repeat(3, 1fr)" gap>
         <Select
-          items={JOURNEY_STEPS}
           label={formatMessage(labels.steps)}
           value={steps}
           defaultValue={steps}
diff --git a/src/app/(main)/websites/[websiteId]/compare/CompareTables.tsx b/src/app/(main)/websites/[websiteId]/compare/CompareTables.tsx
index 08d7238ee..280cbd147 100644
--- a/src/app/(main)/websites/[websiteId]/compare/CompareTables.tsx
+++ b/src/app/(main)/websites/[websiteId]/compare/CompareTables.tsx
@@ -152,7 +152,6 @@ export function CompareTables({ websiteId }: { websiteId: string }) {
     <>
       <Row width="300px">
         <Select
-          items={items}
           label={formatMessage(labels.compare)}
           value={view}
           defaultValue={view}
diff --git a/src/components/common/FilterRecord.tsx b/src/components/common/FilterRecord.tsx
index bc6ecae32..e168ef791 100644
--- a/src/components/common/FilterRecord.tsx
+++ b/src/components/common/FilterRecord.tsx
@@ -66,25 +66,20 @@ export function FilterRecord({
       <Label>{fields.find(f => f.name === name)?.label}</Label>
       <Grid columns="1fr auto" gap>
         <Grid columns={{ base: '1fr', md: '200px 1fr' }} gap>
-          <Select
-            items={operators.filter(({ type }) => type === 'string')}
-            value={operator}
-            onChange={handleSelectOperator}
-          >
-            {({ name, label }: any) => {
-              return (
+          <Select value={operator} onChange={handleSelectOperator}>
+            {operators
+              .filter(({ type }) => type === 'string')
+              .map(({ name, label }: any) => (
                 <ListItem key={name} id={name}>
                   {label}
                 </ListItem>
-              );
-            }}
+              ))}
           </Select>
           {isSearch && (
             <TextField value={selected} defaultValue={selected} onChange={handleSelectValue} />
           )}
           {!isSearch && (
             <Select
-              items={items}
               value={selected}
               onChange={handleSelectValue}
               searchValue={search}
diff --git a/src/components/input/CurrencySelect.tsx b/src/components/input/CurrencySelect.tsx
index 2b6045b45..84e0ee21d 100644
--- a/src/components/input/CurrencySelect.tsx
+++ b/src/components/input/CurrencySelect.tsx
@@ -9,7 +9,6 @@ export function CurrencySelect({ value, onChange }) {
 
   return (
     <Select
-      items={CURRENCIES}
       label={formatMessage(labels.currency)}
       value={value}
       defaultValue={value}
diff --git a/src/components/input/UserSelect.tsx b/src/components/input/UserSelect.tsx
index ccb3d4325..b77445c99 100644
--- a/src/components/input/UserSelect.tsx
+++ b/src/components/input/UserSelect.tsx
@@ -51,7 +51,6 @@ export function UserSelect({
   return (
     <Select
       {...props}
-      items={listItems}
       value={username}
       isLoading={usersLoading || (teamId && teamMembersLoading)}
       allowSearch={true}
@@ -65,7 +64,11 @@ export function UserSelect({
         style: { maxHeight: 'calc(42vh - 65px)' },
       }}
     >
-      {({ id, username }: any) => <ListItem key={id}>{username}</ListItem>}
+      {listItems.map(({ id, username }) => (
+        <ListItem key={id} id={id}>
+          {username}
+        </ListItem>
+      ))}
     </Select>
   );
 }
diff --git a/src/components/input/WebsiteSelect.tsx b/src/components/input/WebsiteSelect.tsx
index 330f826aa..399efee58 100644
--- a/src/components/input/WebsiteSelect.tsx
+++ b/src/components/input/WebsiteSelect.tsx
@@ -54,7 +54,6 @@ export function WebsiteSelect({
   return (
     <Select
       {...props}
-      items={listItems}
       value={websiteId}
       isLoading={isLoading}
       allowSearch={true}
@@ -65,10 +64,14 @@ export function WebsiteSelect({
       renderValue={renderValue}
       listProps={{
         renderEmptyState: () => <Empty message={formatMessage(messages.noResultsFound)} />,
-        style: { maxHeight: 'calc(42vh - 65px)' },
+        style: { maxHeight: 'calc(42vh - 65px)', width: 280 },
       }}
     >
-      {({ id, name }: any) => <ListItem key={id}>{name}</ListItem>}
+      {listItems.map(({ id, name }) => (
+        <ListItem key={id} id={id}>
+          {name}
+        </ListItem>
+      ))}
     </Select>
   );
 }