Auto-focus search input when opening Add Filter menu
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 68/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Stale
- Tech stack
- typescript
- Domain
- frontend
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.
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.
- Dominant language
- TypeScript
- Stars
- 431
- Forks
- 179
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 71
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.
More from temporalio/ui
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
temporalio/ui#3916 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
temporalio/ui#3869 · 1 comment · 1 reaction ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
temporalio/ui#3840 ·
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
temporalio/ui#3752 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
temporalio/ui#3744 · 1 reaction ·
Similar issues
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 91/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 95/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100