temporalio / temporalio/ui

Auto-focus search input when opening Add Filter menu

Open Beginner friendly
#3,145 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
431
Forks
179
Avg merge
2d 9h
Merged PRs (30d)
71

Description

Description

When clicking the Add Filter button in the workflow list filter bar, the dropdown menu opens but the search input inside it is not focused. Users have to click again on the input to start typing, which adds unnecessary friction.

Expected Behavior

When the "Add Filter" menu opens, the search input should be automatically focused so users can start typing a search attribute name immediately.

Affected Components

  • src/lib/components/workflow/filter-bar/search-attribute-menu.svelte
  • src/lib/components/standalone-activities/activities-summary-filter-bar/search-attribute-menu.svelte
  • src/lib/components/search-attribute-filter/search-attribute-menu.svelte

Suggested Fix

Use Svelte's tick() to wait for the DOM update after the menu opens, then focus the filter-search input. The MenuButton's onclick callback already receives the new open state as a boolean, so we can focus the input only when opening (not closing):

onclick={(isOpen) => {
  searchAttributeValue = '';
  if (isOpen) {
    tick().then(() => document.getElementById('filter-search')?.focus());
  }
}}

I have a working implementation ready and would be happy to submit a PR if this is accepted.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by comparing the Add Filter implementations in the three listed search-attribute-menu.svelte files and inspect each MenuButton callback and filter-search input. The work is done when opening each menu focuses its search input immediately, while closing it does not trigger focus; verify the behavior in the workflow list, standalone activities, and search attribute filter contexts.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.