Fix commit filter logic for empty search strings

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<UserFilter>, commit = false) {
+		// dropdown closes (see onOpenChange) or when enter is pressed (see onPressEnter)
+		function update(next: Partial<UserFilter>) {
 			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 })}
 					/>

packages/web_ui/src/util/useColumnSearch.tsx

@@ -43,17 +43,9 @@ export default function useColumnSearch<T>(
 						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);
 					}}
 				/>
 			</div>