Skip to content

fix: replace Select/datalist with styled Combobox for workflow event selectors#320

Merged
driaug merged 2 commits intouseplunk:nextfrom
hanamizuki:fix/wait-for-event-combobox
Apr 1, 2026
Merged

fix: replace Select/datalist with styled Combobox for workflow event selectors#320
driaug merged 2 commits intouseplunk:nextfrom
hanamizuki:fix/wait-for-event-combobox

Conversation

@hanamizuki
Copy link
Copy Markdown
Contributor

@hanamizuki hanamizuki commented Mar 16, 2026

Summary

Replace the conditional Select/Input pattern with a unified Combobox (Input + Command dropdown) for event name fields in both the workflow creation dialog and edit page. Users can always type custom event names while getting autocomplete suggestions from previously tracked events.

Problem

When tracked events exist, the event name fields render as a <Select> dropdown, preventing users from entering event names that haven't been tracked yet. This is problematic for system events like email.opened, email.clicked, etc. that only appear after first occurrence.

Solution

Use the existing cmdk Command components to build a styled Combobox that:

  • Always allows free-text input
  • Shows a filtered dropdown of previously tracked events as suggestions
  • Matches the app's ShadCN/Radix UI design system (unlike native <datalist>)

Changes

apps/web/src/pages/workflows/index.tsx — CreateWorkflowDialog:

  • Trigger event selector

apps/web/src/pages/workflows/[id].tsx — Workflow edit page:

  • Workflow settings trigger event selector
  • Add WAIT_FOR_EVENT step event selector
  • Edit WAIT_FOR_EVENT step event selector

Test plan

  • Create a new workflow, verify trigger event field allows both typing and selecting
  • Add a WAIT_FOR_EVENT step, verify event name field allows both typing and selecting
  • Edit an existing WAIT_FOR_EVENT step, verify same behavior
  • With no tracked events, verify the input still works with free-text
  • Verify autocomplete suggestions filter as you type
  • Verify selecting a suggestion fills the input and closes the dropdown

🤖 Generated with Claude Code

@driaug
Copy link
Copy Markdown
Member

driaug commented Mar 16, 2026

This change would also need to happen on the workflow creation page.

Replace the conditional Select/Input pattern with a unified Combobox
(Input + Command dropdown) that always allows free-text input while
offering autocomplete suggestions from previously tracked events.

Applied to both workflow creation dialog and edit page (trigger event,
add WAIT_FOR_EVENT step, edit WAIT_FOR_EVENT step).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@hanamizuki hanamizuki force-pushed the fix/wait-for-event-combobox branch from 6a56c8b to 3e3117e Compare March 24, 2026 08:44
@hanamizuki
Copy link
Copy Markdown
Contributor Author

This change would also need to happen on the workflow creation page.

Done! I've updated the PR to include the workflow creation page as well.

I also replaced the native with a styled Combobox (using the existing cmdk Command components) so the dropdown matches the app's design system. Both the creation dialog and the edit page (trigger event, add/edit WAIT_FOR_EVENT) now use the same component.

@hanamizuki hanamizuki changed the title fix: allow typing custom event names in workflow event selectors fix: replace Select/datalist with styled Combobox for workflow event selectors Mar 24, 2026
@driaug driaug merged commit a8014cf into useplunk:next Apr 1, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants