Auto-focus search input when opening Add Filter menu
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.sveltesrc/lib/components/standalone-activities/activities-summary-filter-bar/search-attribute-menu.sveltesrc/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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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