3 files changed, 18 insertions, 6 deletions
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 48676a393..b24c8f681 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -284,8 +284,7 @@ export class GroupManager extends React.Component<{}> {
                     placeholder="Group name"
                     onChange={action(() => this.buttonColour = this.inputRef.current?.value ? "black" : "#979797")} />
                 <Select
-                    isMulti={true}
-                    isSearchable={true}
+                    isMulti
                     options={this.options}
                     onChange={this.handleChange}
                     placeholder={"Select users"}
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index f1fe7c22f..08dfb5066 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -634,9 +634,10 @@ export class SharingManager extends React.Component<{}> {
                     {<div className="share-container">
                         <div className="share-setup">
                             <Select
-                                className={"user-search"}
-                                placeholder={"Enter user or group name..."}
+                                className="user-search"
+                                placeholder="Enter user or group name..."
                                 isMulti
+                                isSearchable
                                 closeMenuOnSelect={false}
                                 options={options}
                                 onChange={this.handleUsersChange}
diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx
index 611e11b64..150fc42b6 100644
--- a/src/client/views/nodes/FilterBox.tsx
+++ b/src/client/views/nodes/FilterBox.tsx
@@ -25,6 +25,8 @@ import { SelectionManager } from "../../util/SelectionManager";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
+import Select from "react-select";
+import { UserOptions } from "../../util/GroupManager";
 
 type FilterBoxDocument = makeInterface<[typeof documentSchema]>;
 const FilterBoxDocument = makeInterface(documentSchema);
@@ -207,6 +209,8 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
             </label>)}
         </div>;
 
+        const options = this._allFacets.map(facet => ({ value: facet, label: facet }));
+
         return this.props.dontRegisterView ? (null) : <div className="filterBox-treeView" style={{ width: "100%" }}>
 
             {/* <div className="filterBox-top"> */}
@@ -278,11 +282,19 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
                     removeDocument={returnFalse}
                     addDocument={returnFalse} />
             </div>
-            <Flyout className="filterBox-flyout" anchorPoint={anchorPoints.LEFT_TOP} content={flyout}>
+            {/* <Flyout className="filterBox-flyout" anchorPoint={anchorPoints.RIGHT_TOP} content={flyout}>
                 <div className="filterBox-addWrapper">
                     <div className="filterBox-addFilter"> + add a filter</div>
                 </div>
-            </Flyout>
+            </Flyout> */}
+            <Select
+                placeholder="Add a filter..."
+                options={options}
+                isMulti={false}
+                onChange={val => this.facetClick((val as UserOptions).value)}
+                value={null}
+                closeMenuOnSelect={false}
+            />
 
             <div className="filterBox-bottom">
                 <div className="filterBox-select-matched">