diff --git a/packages/web_ui/src/components/UsersFilters.tsx b/packages/web_ui/src/components/UsersFilters.tsx index 4a8bac72..03fdc1bf 100644 --- a/packages/web_ui/src/components/UsersFilters.tsx +++ b/packages/web_ui/src/components/UsersFilters.tsx @@ -136,15 +136,12 @@ export function useUserFilter( : {}; // Update the live filter as the user types/toggles; the URL is only written when the - // dropdown closes (see onOpenChange), or immediately when `commit` is set (e.g. clear). - function update(next: Partial, commit = false) { + // dropdown closes (see onOpenChange) or when enter is pressed (see onPressEnter) + function update(next: Partial) { const encoded = encodeFilter({ ...filter, ...next }); const values = encoded === "{}" ? null : [encoded]; setSelectedKeys(values ?? []); tableState.setFilter(columnKey, values); - if (commit) { - tableState.commitFilter(columnKey, values); - } } return ( @@ -155,13 +152,9 @@ export function useUserFilter( placeholder="Search username" value={filter.search} allowClear - onSearch={value => { - if (value) { - close(); - } else { - // Clear (X) fires onSearch with an empty value before onChange. - update({ search: undefined }, true); - } + onPressEnter={e => { + close(); + tableState.commitFilter(columnKey); }} onChange={(e) => update({ search: e.target.value !== "" ? e.target.value : undefined })} /> diff --git a/packages/web_ui/src/util/useColumnSearch.tsx b/packages/web_ui/src/util/useColumnSearch.tsx index c5fed6b9..eb5e015f 100644 --- a/packages/web_ui/src/util/useColumnSearch.tsx +++ b/packages/web_ui/src/util/useColumnSearch.tsx @@ -43,17 +43,9 @@ export default function useColumnSearch( setSelectedKeys(values); tableState.setFilter(columnKey, values.length ? values : null); }} - onSearch={value => { - if (value) { - close(); - } else { - // antd fires onSearch with an empty value when the clear (X) is clicked - // (before onChange); commit the cleared state instead of closing, which - // would re-commit the still-live typed value. - setSelectedKeys([]); - tableState.setFilter(columnKey, null); - tableState.commitFilter(columnKey, null); - } + onPressEnter={e => { + close(); + tableState.commitFilter(columnKey); }} />