fixes for docfilter autoheight

3 files changed, 13 insertions, 7 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 863d6fd73..1bd5a8410 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -937,8 +937,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         this.filterDoc._docFilters = temp;
     }
 
+    filterSubHeight = () => (this.filterDoc.currentFilter as Doc)[HeightSym]();
     @computed get filtersSubMenu() {
-        return !this.filterDoc?.currentFilter ? (null) : <div className="propertiesView-filters">
+        return !(this.filterDoc?.currentFilter instanceof Doc) ? (null) : <div className="propertiesView-filters">
             <div className="propertiesView-filters-title"
                 onPointerDown={action(() => this.openFilters = !this.openFilters)}
                 style={{ backgroundColor: this.openFilters ? "black" : "" }}>
@@ -949,7 +950,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             </div>
             {
                 !this.openFilters ? (null) :
-                    <div className="propertiesView-filters-content" style={{ height: this.docHeight() }}>
+                    <div className="propertiesView-filters-content" style={{ height: this.filterSubHeight() + 15 }}>
                         <DocumentView
                             Document={this.filterDoc.currentFilter as Doc}
                             DataDoc={undefined}
@@ -960,7 +961,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             removeDocument={returnFalse}
                             ScreenToLocalTransform={this.getTransform}
                             PanelWidth={this.docWidth}
-                            PanelHeight={this.docHeight}
+                            PanelHeight={this.filterSubHeight}
                             renderDepth={0}
                             scriptContext={this.filterDoc.currentFilter as Doc}
                             focus={emptyFunction}
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index b97d11629..a9e73583d 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -65,8 +65,9 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
     refList: Set<any> = new Set();
     observer: any;
     computeHeight = () => {
-        this.rootDoc._height = this.paddingTop() + 26/* bcz: ugh: title bar height hack ... get ref and compute instead */ +
+        const hgt = this.paddingTop() + 26/* bcz: ugh: title bar height hack ... get ref and compute instead */ +
             Array.from(this.refList).reduce((p, r) => p + Number(getComputedStyle(r).height.replace("px", "")), 0);
+        this.props.setHeight(hgt);
     }
     unobserveHeight = (ref: any) => this.refList.delete(ref);
     observerHeight = (ref: any) => {
diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx
index af95c96fb..65de0a296 100644
--- a/src/client/views/nodes/FilterBox.tsx
+++ b/src/client/views/nodes/FilterBox.tsx
@@ -2,7 +2,7 @@ import React = require("react");
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { computed, observable, action, trace, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, DocListCast, Field, Opt, DocListCastAsync } from "../../../fields/Doc";
+import { Doc, DocListCast, Field, Opt, DocListCastAsync, HeightSym } from "../../../fields/Doc";
 import { documentSchema } from "../../../fields/documentSchemas";
 import { List } from "../../../fields/List";
 import { RichTextField } from "../../../fields/RichTextField";
@@ -360,7 +360,11 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
         }
         );
     }
+    setTreeHeight = (hgt: number) => {
+        this.layoutDoc._height = hgt + 140; // 50?  need to add all the border sizes together.
+    }
 
+    layoutHeight = () => this.layoutDoc[HeightSym]();
     render() {
         const facetCollection = this.props.Document;
 
@@ -412,7 +416,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
                     fieldKey={this.props.fieldKey}
                     CollectionView={undefined}
                     disableDocBrushing={true}
-                    setHeight={returnFalse} // if the tree view can trigger the height of the filter box to change, then this needs to be filled in.
+                    setHeight={this.setTreeHeight} // if the tree view can trigger the height of the filter box to change, then this needs to be filled in.
                     onChildClick={this.suppressChildClick}
                     docFilters={returnEmptyFilter}
                     docRangeFilters={returnEmptyFilter}
@@ -420,7 +424,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
                     ContainingCollectionDoc={this.props.ContainingCollectionDoc}
                     ContainingCollectionView={this.props.ContainingCollectionView}
                     PanelWidth={this.props.PanelWidth}
-                    PanelHeight={this.props.PanelHeight}
+                    PanelHeight={this.layoutHeight}
                     rootSelected={this.props.rootSelected}
                     renderDepth={1}
                     dropAction={this.props.dropAction}