search

9 files changed, 135 insertions, 44 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index f16ef399c..c7cdf8545 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -658,7 +658,7 @@ export class CurrentUserUtils {
         const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
         const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
         if (doc["search-panel"] === undefined) {
-            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({_width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc;
+            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({_width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, _chromeStatus: "disabled", title: "sidebar search stack", })) as any as Doc;
     }
         // Finally, setup the list of buttons to display in the sidebar
         if (doc["tabs-buttons"] === undefined) {
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 4c2d2f0a9..b78ed6fee 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -195,15 +195,13 @@ export class EditableView extends React.Component<EditableProps> {
         if (this.props.positions!==undefined){
         let positions = this.props.positions;
         let length = this.props.search!.length;
-        console.log(contents);
-        console.log(this.props.contents?.valueOf());
+
         // contents = String(this.props.contents.valueOf());
 
         results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(0, this.props.positions![0]) : this.props.placeholder?.valueOf()}</span>);
         positions.forEach((num, cur) => {
             results.push(<span style={{ backgroundColor: "#FFFF00", fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num, num + length) : this.props.placeholder?.valueOf()}</span>);
             let end = 0;
-            console.log
             cur === positions.length-1? end = contents.length: end = positions[cur + 1];
             results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num + length, end) : this.props.placeholder?.valueOf()}</span>);
         }
@@ -217,7 +215,6 @@ else{
     }
 
     render() {
-        console.log(this.props.highlight === undefined);
         if (this._editing && this.props.GetValue() !== undefined) {
             return this.props.sizeToContent ?
                 <div style={{ display: "grid", minWidth: 100 }}>
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c65c90afb..fce3707a7 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -156,10 +156,24 @@ export class MainView extends React.Component {
         const targets = document.elementsFromPoint(e.x, e.y);
         if (targets && targets.length && targets[0].className.toString().indexOf("contextMenu") === -1) {
             ContextMenu.Instance.closeMenu();
+            //SearchBox.Instance.closeSearch();
         }
         if (targets && (targets.length && targets[0].className.toString() !== "timeline-menu-desc" && targets[0].className.toString() !== "timeline-menu-item" && targets[0].className.toString() !== "timeline-menu-input")) {
             TimelineMenu.Instance.closeMenu();
         }
+        if (targets && targets.length && SearchBox.Instance._searchbarOpen){
+            let check = false;
+            targets.forEach((thing)=>{
+            if (thing.className.toString()==="collectionSchemaView-table" || thing.className.toString()==="beta") {
+                check=true;
+            }
+        });
+        if (check===false){
+            SearchBox.Instance.closeSearch();
+        }
+    }
+
+
     });
 
     globalPointerUp = () => this.isPointerDown = false;
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index b1c3705ca..11f0edf23 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -246,7 +246,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         trace();
         let positions = [];
         if (StrCast(this.props.Document._searchString) !== "") {
-            console.log(StrCast(this.props.Document._searchString));
             const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
             let term = "";
             if (cfield!==undefined){
@@ -262,7 +261,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
             }
             let search = StrCast(this.props.Document._searchString)
             let start = term.indexOf(search) as number;
-            console.log(start);
             let tally = 0;
             if (start!==-1){
             positions.push(start);
@@ -277,7 +275,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                 positions.pop();
             }
         }
-        console.log(positions.length);
         return (
             <div className="collectionSchemaView-cellContainer" style={{ cursor: fieldIsDoc ? "grab" : "auto" }} ref={dragRef} onPointerDown={this.onPointerDown} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>
                 <div className={className} ref={this._focusRef} onPointerDown={onItemDown} tabIndex={-1}>
@@ -299,18 +296,14 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                                 //     return "0";
                                 // } else {
                                     const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
-                                    console.log(cfield);
                                     if (cfield!==undefined){
                                     if (cfield.Text!==undefined){
-                                        console.log
-                                        return(cfield.Text)
+                                        return(cfield.Text);
                                     }
                                     else if (StrCast(cfield)){
-                                        console.log("strcast");
                                         return StrCast(cfield);
                                     }
                                     else {
-                                        console.log("numcast");
                                         return String(NumCast(cfield));
                                     }
                                 }
@@ -325,7 +318,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                                     return "0";
                                 } else {
                                     const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
-                                    console.log(cfield);
                                     if (type === "number") {
                                         return StrCast(cfield);
                                     }
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index 4a9bd4aa6..ec8605215 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -9,6 +9,8 @@ import { ColumnType } from "./CollectionSchemaView";
 import { faFile } from "@fortawesome/free-regular-svg-icons";
 import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField";
 import { undoBatch } from "../../util/UndoManager";
+import { Doc } from "../../../fields/Doc";
+import { StrCast } from "../../../fields/Types";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -291,6 +293,7 @@ export interface KeysDropdownProps {
     onSelect: (oldKey: string, newKey: string, addnew: boolean, filter?: string) => void;
     setIsEditing: (isEditing: boolean) => void;
     width?: string;
+    docs?: Doc[];
 }
 @observer
 export class KeysDropdown extends React.Component<KeysDropdownProps> {
@@ -309,7 +312,6 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         if (key.slice(0, this._key.length) === this._key && this._key !== key) {
             let filter = key.slice(this._key.length - key.length);
             this.props.onSelect(this._key, this._key, this.props.addNew, filter);
-            console.log("YEE");
         }
         else {
             this.props.onSelect(this._key, key, this.props.addNew);
@@ -319,6 +321,13 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         }
     }
 
+    @action
+    onSelect2 = (key: string): void => {
+        this._searchTerm=this._searchTerm.slice(0,this._key.length) +key;
+        this._isOpen = false;
+
+    }
+
     @undoBatch
     onKeyDown = (e: React.KeyboardEvent): void => {
         //if (this._key !==)
@@ -394,7 +403,35 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         return options;
     }
 
+    renderFilterOptions = (): JSX.Element[] | JSX.Element => {
+        console.log("HEHEHE")
+        if (!this._isOpen) return <></>;
+
+        const keyOptions:string[]=[];
+        console.log(this._searchTerm.slice(this._key.length))
+        let temp = this._searchTerm.slice(this._key.length);
+        this.props.docs?.forEach((doc)=>{
+            let key = StrCast(doc[this._key]);
+            if (keyOptions.includes(key)===false && key.includes(temp)){
+            keyOptions.push(key);
+            }
+        });
+
+
+        const options = keyOptions.map(key => {
+            return <div key={key} className="key-option" style={{
+                border: "1px solid lightgray",
+                width: this.props.width, maxWidth: this.props.width, overflowX: "hidden"
+            }}
+                onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect2(key);  }}>{key}</div>;
+        });
+
+        return options;
+    }
+
+
     render() {
+        console.log(this.props.docs);
         return (
             <div className="keys-dropdown" style={{ zIndex: 10, width: this.props.width, maxWidth: this.props.width }}>
                 {this._key === this._searchTerm.slice(0, this._key.length) ?
@@ -414,7 +451,8 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                     width: this.props.width, maxWidth: this.props.width,
                 }}
                     onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
-                    {this.renderOptions()}
+                    {this._key === this._searchTerm.slice(0, this._key.length) ?
+                    this.renderFilterOptions():this.renderOptions()}
                 </div>
             </div >
         );
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index be4f7c888..0b3d8e20d 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -609,7 +609,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
 
 
     onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        console.log("yeet2");
     }
     render() {
         TraceMobx();
@@ -631,10 +630,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         return <div className="collectionSchemaView-container"
             style={{
                 pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined,
-                width: this.props.PanelWidth() || "100%", height: this.props.PanelPosition === "absolute" ? this.props.PanelHeight() : this.props.PanelHeight()  || "100%", top: this.props.PanelPosition === "absolute" ? 32 : 0, position: this.props.PanelPosition || "relative",
+                width: this.props.PanelWidth() || "100%", height: this.props.PanelPosition === "absolute" ? this.props.PanelHeight() : this.props.PanelHeight()  || "100%", top: this.props.PanelPosition === "absolute" ? 52 : 0, position: this.props.PanelPosition || "relative",
             }}  >
             <div className="collectionSchemaView-tableContainer"
-                style={{ width: `calc(100% - ${this.previewWidth()}px)` }}
+                style={{ backgroundColor:"white", width: `calc(100% - ${this.previewWidth()}px)` }}
                 onKeyPress={this.onKeyPress}
                 onPointerDown={this.onPointerDown}
                 onWheel={e => this.props.active(true) && e.stopPropagation()}
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 2b60bef1b..c820cb661 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -189,7 +189,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                 addNew={false}
                 onSelect={this.props.changeColumns}
                 setIsEditing={this.props.setHeaderIsEditing}
-
+                docs={this.props.childDocs}
                 // try commenting this out
                 width={"100%"}
             />;
@@ -451,10 +451,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         //@ts-ignore
         expandedRowsList.forEach(row => expanded[row] = true);
         const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :((((
-        let overflow = "auto";
-        StrCast(this.props.Document.type) === "search" ? overflow = "overlay" : "auto";
         return <ReactTable
-            style={{ position: "relative", overflow: overflow }}
+            style={{ position: "relative" }}
             data={children}
             page={0}
             pageSize={children.length}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 8b83a29b2..732a254fe 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -46,8 +46,8 @@ export interface FieldViewProps {
     dontRegisterView?: boolean;
     focus: (doc: Doc) => void;
     ignoreAutoHeight?: boolean;
-    PanelWidth: () => number;
-    PanelHeight: () => number;
+    PanelWidth: () => number|string;
+    PanelHeight: () => number|string;
     PanelPosition: string;
     NativeHeight: () => number;
     NativeWidth: () => number;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 21f476ea4..ee85375e3 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -73,7 +73,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @computed get _searchString() { return this.layoutDoc.searchQuery; }
     @computed set _searchString(value) { this.layoutDoc.searchQuery = (value); }
     @observable private _resultsOpen: boolean = false;
-    @observable private _searchbarOpen: boolean = false;
+    @observable _searchbarOpen: boolean = false;
     @observable private _results: [Doc, string[], string[]][] = [];
     @observable private _openNoResults: boolean = false;
     @observable private _visibleElements: JSX.Element[] = [];
@@ -183,10 +183,16 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @action
     getViews = (doc: Doc) => SearchUtil.GetViewsOfDocument(doc)
 
+
+    @observable newsearchstring: string ="";
     @action.bound
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
-        this.layoutDoc._searchString = e.target.value;
-
+        //this.layoutDoc._searchString = e.target.value;
+        this.newsearchstring= e.target.value;
+        if (e.target.value===""){
+            console.log("CLOSE");
+            runInAction(()=>{this.open=false});
+        }
         this._openNoResults = false;
         this._results = [];
         this._resultsSet.clear();
@@ -199,10 +205,11 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     enter = (e: React.KeyboardEvent) => {
         if (e.key === "Enter") {
+            console.log(this.newsearchstring)
+            this.layoutDoc._searchString=this.newsearchstring;
             // if (this._icons !== this._allIcons) {
             //     runInAction(() => { this.expandedBucket = false });
             // }
-            console.log(StrCast(this.layoutDoc._searchString));
             if (StrCast(this.layoutDoc._searchString)!==""){
                 console.log("OPEN");
                 runInAction(()=>{this.open=true});
@@ -392,11 +399,15 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     @action
     submitSearch = async (reset?: boolean) => {
+        
         this.checkIcons();
         if (reset) {
             this.layoutDoc._searchString = "";
         }
+        this.noresults= false;
         this.dataDoc[this.fieldKey] = new List<Doc>([]);
+        this.headercount=0;
+        this.children=0;
         this.buckets = [];
         this.new_buckets = {};
         const query = StrCast(this.layoutDoc._searchString);
@@ -519,7 +530,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         });
         return this.lockPromise;
     }
-
+    @observable noresults = false;
     collectionRef = React.createRef<HTMLSpanElement>();
     startDragCollection = async () => {
         const res = await this.getAllResults(this.getFinalQuery(StrCast(this.layoutDoc._searchString)));
@@ -591,6 +602,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this._curRequest = undefined;
     }
 
+    @observable children: number =0;
     @action
     resultsScrolled = (e?: React.UIEvent<HTMLDivElement>) => {
         if (!this._resultsRef.current) return;
@@ -604,11 +616,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this._endIndex = 30;
         let headers = new Set<string>();
         if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) {
-            this._visibleElements = [<div className="no-result">No Search Results</div>];
-            //this._visibleDocuments= Docs.Create.
-            let noResult = Docs.Create.TextDocument("", { title: "noResult" })
-            noResult.isBucket = false;
-            Doc.AddDocToList(this.dataDoc, this.props.fieldKey, noResult);
+            this.noresults=true;
             return;
         }
 
@@ -653,6 +661,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                             this._visibleDocuments[i] = result[0];
                             this._isSearch[i] = "search";
                             Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
+                            this.children ++;
                         }
                     }
                     else {
@@ -669,6 +678,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                                 this._isSearch[i] = "search";
                                 console.log("WHYYYY");
                                 Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
+                                this.children ++;
 
                             }
                         }
@@ -681,6 +691,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         let schemaheaders: SchemaHeaderField[] = [];
         this.headerscale = headers.size;
         headers.forEach((item) => schemaheaders.push(new SchemaHeaderField(item, "#f1efeb")))
+        this.headercount= schemaheaders.length;
         this.props.Document._schemaHeaders = new List<SchemaHeaderField>(schemaheaders);
         if (this._maxSearchIndex >= this._numTotalResults) {
             this._visibleElements.length = this._results.length;
@@ -688,7 +699,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             this._isSearch.length = this._results.length;
         }
     }
-
+    @observable headercount:number=0;
     @observable headerscale: number = 0;
 
     findCommonElements(arr2: string[]) {
@@ -1112,16 +1123,24 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     }
     //Make id layour document
     render() {
+        this.props.Document._chromeStatus === "disabled";
         this.props.Document._searchDoc = true;
+        //let length = Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []).length;
+        let length = this.headercount;
+        length > 3 ? length = 650 : length = length * 205 + 51;
+        let height = this.children;
+        height > 8 ? height = 31+31*8: height = 31*height+ 31; 
         return (
             <div style={{ pointerEvents: "all" }} className="searchBox-container">
                 <div className="searchBox-bar">
                     {/* <span className="searchBox-barChild searchBox-collection" onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection">
                         <FontAwesomeIcon icon="object-group" size="lg" />
                     </span> */}
-                    <input value={StrCast(this.layoutDoc._searchString)} onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
+                    <div style={{position:"absolute", left:15}}>{Doc.CurrentUserEmail}</div>
+                    <FontAwesomeIcon icon={"search"} size="lg" style={{ position:"relative", left:24, padding:1 }} />
+                    <input value={this.newsearchstring} autoComplete="off" onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
                         className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter} onFocus={this.openSearch}
-                        style={{ width: this._searchbarOpen ? "200px" : "200px" }} />
+                        style={{ paddingLeft:23, width: this._searchbarOpen ? "200px" : "200px" }} />
                     {/* <button className="searchBox-barChild searchBox-filter" style={{ transform: "none" }} title="Advanced Filtering Options" onClick={() => this.handleFilterChange()}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button> */}
                 </div>
                 <div id={`filterhead${this.props.Document[Id]}`} className="filter-form" style={this._filterOpen && this._numTotalResults > 0 ? { overflow: "visible" } : { overflow: "hidden" }}>
@@ -1135,18 +1154,52 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         {this.keyButtons}
                     </div>
                 </div>
-                <div style={{zIndex:2000}}>
-                {this.headerscale > 0 ? <CollectionView {...this.props}
+                <div style={{ zIndex:2000}}>
+                {this._searchbarOpen === true ? 
+                <div style={{display:"flex", justifyContent:"center",}}>
+                <div style={{width: this.headercount>0?length: 251,
+                height: 25,
+                borderColor: "#9c9396",
+                border: "1px solid",
+                borderRadius:"0.3em",
+                borderBottom:this.open===false?"1px solid":"none",
+                position: "absolute",
+                background: "rgb(241, 239, 235)",
+                top:29}}>                 
+                    <form className="beta" style={{justifyContent:"space-evenly", display:"flex"}}><label>
+      <input
+        type="radio"
+      />
+      Current collection 
+    </label>
+    <label>
+      <input
+        type="radio"
+      />
+      Workspace
+    </label>
+    <label>
+      <input
+        type="radio"
+      />
+      Database
+    </label></form>           
+                </div>
+
+                {this.noresults===false? <div style={{display:this.open===true? "contents":"none"}}> <CollectionView {...this.props}
                     Document={this.props.Document}
                     moveDocument={returnFalse}
                     removeDocument={returnFalse}
-                    PanelHeight={this.open===true?()=>200 :()=>0}
-                    PanelWidth={this.open===true? ()=>600 : ()=>0}
+                    PanelHeight={this.open===true?()=> height:()=>0}
+                    PanelWidth={this.open===true? ()=>length : ()=>0}
                     PanelPosition={"absolute"}
                     focus={this.selectElement}
                     ScreenToLocalTransform={Transform.Identity}
-                     /> : undefined}
-                     </div>
+                     /></div>: <div style={{display:"flex",justifyContent:"center"}}><div style={{height:200, top:29, width:250, position:"absolute", backgroundColor:"white", display:"flex", justifyContent:"center", alignItems    :"center", border: "black 1px solid", }}>
+                     <div>No search results :(</div>
+                     </div></div>}
+                     </div>: undefined}
+                </div>
 
                 <div className="searchBox-results" onScroll={this.resultsScrolled} style={{
                     display: this._resultsOpen ? "flex" : "none",