From 3214f6c42d4ca6ab628e905ac69ed82648ccf47c Mon Sep 17 00:00:00 2001
From: Dries Augustyns <inbox@driaug.com>
Date: Wed, 1 Apr 2026 18:55:32 +0200
Subject: [PATCH] fix: Hint custom event names in combobox when no matches are
 found

---
 apps/web/src/pages/workflows/[id].tsx  | 55 +++++++++++++++++---------
 apps/web/src/pages/workflows/index.tsx | 22 +++++++----
 2 files changed, 51 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/pages/workflows/[id].tsx b/apps/web/src/pages/workflows/[id].tsx
index 70b1876..4288b89 100644
--- a/apps/web/src/pages/workflows/[id].tsx
+++ b/apps/web/src/pages/workflows/[id].tsx
@@ -27,7 +27,6 @@ import {
   SelectTrigger,
   SelectValue,
   Command,
-  CommandEmpty,
   CommandGroup,
   CommandItem,
   CommandList,
@@ -875,21 +874,27 @@ function SettingsDialog({workflow, open, onOpenChange, onSave}: SettingsDialogPr
                 required
                 autoComplete="off"
               />
-              {eventPopoverOpen && eventNamesData?.eventNames && eventNamesData.eventNames.length > 0 && (
+              {eventPopoverOpen && ((eventNamesData?.eventNames?.length ?? 0) > 0 || eventName?.trim()) && (
                 <div className="absolute z-50 w-full mt-1 rounded-md border border-neutral-200 bg-white shadow-md">
                   <Command>
                     <CommandList>
-                      <CommandEmpty className="py-3 text-center text-sm text-neutral-500">
-                        No matching events
-                      </CommandEmpty>
                       <CommandGroup>
-                        {eventNamesData.eventNames
-                          .filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase()))
+                        {eventNamesData?.eventNames
+                          ?.filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase()))
                           .map(n => (
                             <CommandItem key={n} value={n} onSelect={() => { setEventName(n); setEventPopoverOpen(false); }}>
                               {n}
                             </CommandItem>
                           ))}
+                        {eventName?.trim() && !eventNamesData?.eventNames?.some(n => n === eventName.trim()) && (
+                          <CommandItem
+                            key="__custom__"
+                            value={eventName.trim()}
+                            onSelect={() => { setEventName(eventName.trim()); setEventPopoverOpen(false); }}
+                          >
+                            Use &ldquo;{eventName.trim()}&rdquo;
+                          </CommandItem>
+                        )}
                       </CommandGroup>
                     </CommandList>
                   </Command>
@@ -1651,21 +1656,27 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
                       className="mt-1.5"
                       autoComplete="off"
                     />
-                    {eventPopoverOpen && eventNamesData?.eventNames && eventNamesData.eventNames.length > 0 && (
+                    {eventPopoverOpen && ((eventNamesData?.eventNames?.length ?? 0) > 0 || eventName?.trim()) && (
                       <div className="absolute z-50 w-full mt-1 rounded-md border border-neutral-200 bg-white shadow-md">
                         <Command>
                           <CommandList>
-                            <CommandEmpty className="py-3 text-center text-sm text-neutral-500">
-                              No matching events
-                            </CommandEmpty>
                             <CommandGroup>
-                              {eventNamesData.eventNames
-                                .filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase()))
+                              {eventNamesData?.eventNames
+                                ?.filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase()))
                                 .map(n => (
                                   <CommandItem key={n} value={n} onSelect={() => { setEventName(n); setEventPopoverOpen(false); }}>
                                     {n}
                                   </CommandItem>
                                 ))}
+                              {eventName?.trim() && !eventNamesData?.eventNames?.some(n => n === eventName.trim()) && (
+                                <CommandItem
+                                  key="__custom__"
+                                  value={eventName.trim()}
+                                  onSelect={() => { setEventName(eventName.trim()); setEventPopoverOpen(false); }}
+                                >
+                                  Use &ldquo;{eventName.trim()}&rdquo;
+                                </CommandItem>
+                              )}
                             </CommandGroup>
                           </CommandList>
                         </Command>
@@ -2847,21 +2858,27 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
                       className="mt-1.5"
                       autoComplete="off"
                     />
-                    {eventPopoverOpen && eventNamesData?.eventNames && eventNamesData.eventNames.length > 0 && (
+                    {eventPopoverOpen && ((eventNamesData?.eventNames?.length ?? 0) > 0 || eventName?.trim()) && (
                       <div className="absolute z-50 w-full mt-1 rounded-md border border-neutral-200 bg-white shadow-md">
                         <Command>
                           <CommandList>
-                            <CommandEmpty className="py-3 text-center text-sm text-neutral-500">
-                              No matching events
-                            </CommandEmpty>
                             <CommandGroup>
-                              {eventNamesData.eventNames
-                                .filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase()))
+                              {eventNamesData?.eventNames
+                                ?.filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase()))
                                 .map(n => (
                                   <CommandItem key={n} value={n} onSelect={() => { setEventName(n); setEventPopoverOpen(false); }}>
                                     {n}
                                   </CommandItem>
                                 ))}
+                              {eventName?.trim() && !eventNamesData?.eventNames?.some(n => n === eventName.trim()) && (
+                                <CommandItem
+                                  key="__custom__"
+                                  value={eventName.trim()}
+                                  onSelect={() => { setEventName(eventName.trim()); setEventPopoverOpen(false); }}
+                                >
+                                  Use &ldquo;{eventName.trim()}&rdquo;
+                                </CommandItem>
+                              )}
                             </CommandGroup>
                           </CommandList>
                         </Command>
diff --git a/apps/web/src/pages/workflows/index.tsx b/apps/web/src/pages/workflows/index.tsx
index 8088786..e225b32 100644
--- a/apps/web/src/pages/workflows/index.tsx
+++ b/apps/web/src/pages/workflows/index.tsx
@@ -7,7 +7,6 @@ import {
   CardHeader,
   CardTitle,
   Command,
-  CommandEmpty,
   CommandGroup,
   CommandItem,
   CommandList,
@@ -412,16 +411,13 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
                 required
                 autoComplete="off"
               />
-              {eventPopoverOpen && eventNamesData?.eventNames && eventNamesData.eventNames.length > 0 && (
+              {eventPopoverOpen && ((eventNamesData?.eventNames?.length ?? 0) > 0 || eventName?.trim()) && (
                 <div className="absolute z-50 w-full mt-1 rounded-md border border-neutral-200 bg-white shadow-md">
                   <Command>
                     <CommandList>
-                      <CommandEmpty className="py-3 text-center text-sm text-neutral-500">
-                        No matching events
-                      </CommandEmpty>
                       <CommandGroup>
-                        {eventNamesData.eventNames
-                          .filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase()))
+                        {eventNamesData?.eventNames
+                          ?.filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase()))
                           .map(n => (
                             <CommandItem
                               key={n}
@@ -434,6 +430,18 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
                               {n}
                             </CommandItem>
                           ))}
+                        {eventName?.trim() && !eventNamesData?.eventNames?.some(n => n === eventName.trim()) && (
+                          <CommandItem
+                            key="__custom__"
+                            value={eventName.trim()}
+                            onSelect={() => {
+                              setEventName(eventName.trim());
+                              setEventPopoverOpen(false);
+                            }}
+                          >
+                            Use &ldquo;{eventName.trim()}&rdquo;
+                          </CommandItem>
+                        )}
                       </CommandGroup>
                     </CommandList>
                   </Command>