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.
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.svelteSuggested Fix
Use Svelte's
tick()to wait for the DOM update after the menu opens, then focus thefilter-searchinput. TheMenuButton'sonclickcallback already receives the newopenstate 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.