fixed checkbox dismiss behavior for SchemaViews

2 files changed, 3 insertions, 27 deletions

diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index c2bc7c77c..9bbc1b79f 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -494,12 +494,12 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                             //this._inputRef.current!.select();
                             e.stopPropagation();
                         }} onFocus={this.onFocus} onBlur={this.onBlur}></input>
-                    <div className="keys-options-wrapper" style={{
+                    {!this._isOpen ? (null) : <div className="keys-options-wrapper" style={{
                         width: this.props.width, maxWidth: this.props.width, height: "auto",
                     }}
                         onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
                         {this._key === this._searchTerm ? this.renderFilterOptions() : this.renderOptions()}
-                    </div>
+                    </div>}
                 </div >
             </div>
         );
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 2e9d2517c..5dc743a36 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -62,8 +62,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
 
     @observable _menuWidth = 0;
     @observable _headerOpen = false;
-    @observable _isOpen = false;
-    @observable _node: HTMLDivElement | null = null;
     @observable _headerIsEditing = false;
     @observable _col: any = "";
     @observable _menuHeight = 0;
@@ -111,25 +109,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     }
     @computed get possibleKeys() { return this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); }
 
-
-    componentDidMount() {
-        document.addEventListener("pointerdown", this.detectClick);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener("pointerdown", this.detectClick);
-    }
-
     @action setHeaderIsEditing = (isEditing: boolean) => this._headerIsEditing = isEditing;
 
-    detectClick = (e: PointerEvent): void => {
-        if (this._node && this._node.contains(e.target as Node)) {
-        } else {
-            this._isOpen = false;
-            this.setHeaderIsEditing(false);
-            this.closeHeader();
-        }
-    }
 
     @action
     changeColumnType = (type: ColumnType, col: any): void => {
@@ -183,11 +164,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     }
 
     @action
-    setNode = (node: HTMLDivElement): void => {
-        node && (this._node = node);
-    }
-
-    @action
     typesDropdownChange = (bool: boolean) => {
         this._openTypes = bool;
     }
@@ -607,7 +583,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         }
         TraceMobx();
         const menuContent = this.renderMenuContent;
-        const menu = <div className="collectionSchema-header-menu" ref={this.setNode}
+        const menu = <div className="collectionSchema-header-menu"
             onWheel={e => this.onZoomMenu(e)}
             onPointerDown={e => this.onHeaderClick(e)}
             style={{