From 36b065efd6f515ab268b37dc25c8b25a35474862 Mon Sep 17 00:00:00 2001
From: Leszek Manicki <leszek.manicki@wikimedia.de>
Date: Thu, 23 Jun 2022 21:24:24 +0200
Subject: [PATCH] feat: Make organization filter a tag selection

Allows for picking and also deleting an organization
using keyboard.
Includes a hack that always enforces a max. single
organization to be picked. Also makes the value
passed to the select field de facto incorrect --
as it is a multiselect nominally, the value
should be an array.
Working this around makes the filters to continue
work in search however.
---
 .../__tests__/__snapshots__/filter.test.tsx.snap         | 2 +-
 packages/client/src/components/filter.tsx                | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/__tests__/__snapshots__/filter.test.tsx.snap b/packages/client/src/components/__tests__/__snapshots__/filter.test.tsx.snap
index 4e3a381..e652c3c 100644
--- a/packages/client/src/components/__tests__/__snapshots__/filter.test.tsx.snap
+++ b/packages/client/src/components/__tests__/__snapshots__/filter.test.tsx.snap
@@ -73,9 +73,9 @@ exports[`Filter renders correctly 1`] = `
       Organization
     </label>
     <Select
-      allowClear={true}
       filterOption={[Function]}
       id="organization"
+      mode="tags"
       onChange={[Function]}
       optionFilterProp="children"
       placeholder="Any Organization"
diff --git a/packages/client/src/components/filter.tsx b/packages/client/src/components/filter.tsx
index 258290a..49322af 100644
--- a/packages/client/src/components/filter.tsx
+++ b/packages/client/src/components/filter.tsx
@@ -138,13 +138,18 @@ const Filter: React.FC<FilterProps> = ({ filters, onFilterChange }) => {
 			<div className="filter-element">
 				<label htmlFor="organization">Organization</label>
 				<Select
-					allowClear
+					mode="tags"
 					style={{ width: 240 }}
 					showSearch
 					placeholder="Any Organization"
 					value={filters.organization}
 					optionFilterProp="children"
-					onChange={(val) => onFilterChange("organization", val)}
+					onChange={(val) => {
+						if (Array.isArray(val)) {
+							val = val.pop();
+						}
+						onFilterChange("organization", val);
+					}}
 					filterOption={(input, option) =>
 						option!.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
 					}