Merge pull request #133 from wmde/june22-organization-filter-tag-pill

Make organization filter a tag selection
wmde · Jul 6, 2022 · 44e883a · 44e883a
2 parents 9338ae1 + 36b065e
commit 44e883a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 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
@@ -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
@@ -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
 					}