Changes

1 files changed, 3 insertions, 15 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index aa34a12ed..af224747d 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -40,8 +40,6 @@ export class MainView extends React.Component {
     @observable private _workspacesShown: boolean = false;
     @observable public pwidth: number = 0;
     @observable public pheight: number = 0;
-    private searchbox: React.RefObject<HTMLDivElement>;
-
     @computed private get mainContainer(): Opt<Doc> {
         return FieldValue(Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc));
     }
@@ -57,7 +55,6 @@ export class MainView extends React.Component {
     constructor(props: Readonly<{}>) {
         super(props);
         MainView.Instance = this;
-        this.searchbox = React.createRef();
         // causes errors to be generated when modifying an observable outside of an action
         configure({ enforceActions: "observed" });
         if (window.location.search.includes("readonly")) {
@@ -267,26 +264,17 @@ export class MainView extends React.Component {
                 <button className="toolbar-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button>
                 <button className="toolbar-button round-button" title="Ink" onClick={() => InkingControl.Instance.toggleDisplay()}><FontAwesomeIcon icon="pen-nib" size="sm" /></button>
             </div >,
-            <div ref={this.searchbox} className="main-searchDiv" key="search" style={{ top: '34px', right: '1px', position: 'absolute' }} > <SearchBox /> </div>,
+            this.isSearchVisible ? <div className="main-searchDiv" key="search" style={{ top: '34px', right: '1px', position: 'absolute' }} > <SearchBox /> </div> : null,
             <div className="main-buttonDiv" key="logout" style={{ bottom: '0px', right: '1px', position: 'absolute' }} ref={logoutRef}>
                 <button onClick={() => request.get(DocServer.prepend(RouteStore.logout), emptyFunction)}>Log Out</button></div>
         ];
 
     }
 
+    @observable isSearchVisible = false;
     @action
     toggleSearch = () => {
-        const sb = this.searchbox.current;
-        if (sb !== null) {
-            console.log("toggle search")
-            if (sb.style.display === "none") {
-                sb.style.display = "block";
-            }
-            else {
-                sb.style.display = "none";
-            }
-        }
-
+        this.isSearchVisible = !this.isSearchVisible;
     }
 
     render() {