diff --git a/ui/src/flux/components/DatabaseListItem.tsx b/ui/src/flux/components/DatabaseListItem.tsx
index a9eba5be52..3b0795ea57 100644
--- a/ui/src/flux/components/DatabaseListItem.tsx
+++ b/ui/src/flux/components/DatabaseListItem.tsx
@@ -85,25 +85,23 @@ class DatabaseListItem extends PureComponent<Props, State> {
     const {db, service} = this.props
     const {isOpen, searchTerm} = this.state
 
-    if (isOpen) {
-      return (
-        <div className="flux-schema--children">
-          <div className="flux-schema--filter">
-            <input
-              className="form-control input-xs"
-              placeholder={`Filter within ${db}`}
-              type="text"
-              spellCheck={false}
-              autoComplete="off"
-              value={searchTerm}
-              onClick={this.handleInputClick}
-              onChange={this.onSearch}
-            />
-          </div>
-          <TagList db={db} service={service} tags={this.tags} filter={[]} />
+    return (
+      <div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
+        <div className="flux-schema--filter">
+          <input
+            className="form-control input-xs"
+            placeholder={`Filter within ${db}`}
+            type="text"
+            spellCheck={false}
+            autoComplete="off"
+            value={searchTerm}
+            onClick={this.handleInputClick}
+            onChange={this.onSearch}
+          />
         </div>
-      )
-    }
+        <TagList db={db} service={service} tags={this.tags} filter={[]} />
+      </div>
+    )
   }
 
   private handleClickCopy = e => {
diff --git a/ui/src/flux/components/TagList.tsx b/ui/src/flux/components/TagList.tsx
index 86295ad873..aea90cbb19 100644
--- a/ui/src/flux/components/TagList.tsx
+++ b/ui/src/flux/components/TagList.tsx
@@ -12,17 +12,7 @@ interface Props {
   filter: SchemaFilter[]
 }
 
-interface State {
-  isOpen: boolean
-}
-
-export default class TagList extends PureComponent<Props, State> {
-  constructor(props) {
-    super(props)
-
-    this.state = {isOpen: false}
-  }
-
+export default class TagList extends PureComponent<Props> {
   public render() {
     const {db, service, tags, filter} = this.props
 
diff --git a/ui/src/flux/components/TagListItem.tsx b/ui/src/flux/components/TagListItem.tsx
index 1093f6da07..ec4f17314b 100644
--- a/ui/src/flux/components/TagListItem.tsx
+++ b/ui/src/flux/components/TagListItem.tsx
@@ -66,7 +66,14 @@ export default class TagListItem extends PureComponent<Props, State> {
 
   public render() {
     const {tagKey, db, service, filter} = this.props
-    const {tagValues, searchTerm, loadingMore, count, limit} = this.state
+    const {
+      tagValues,
+      searchTerm,
+      loadingMore,
+      count,
+      limit,
+      isOpen,
+    } = this.state
 
     return (
       <div className={this.className}>
@@ -83,44 +90,37 @@ export default class TagListItem extends PureComponent<Props, State> {
             </div>
           </CopyToClipboard>
         </div>
-        {this.state.isOpen && (
-          <div className="flux-schema--children">
-            <div
-              className="flux-schema--header"
-              onClick={this.handleInputClick}
-            >
-              <div className="flux-schema--filter">
-                <input
-                  className="form-control input-xs"
-                  placeholder={`Filter within ${tagKey}`}
-                  type="text"
-                  spellCheck={false}
-                  autoComplete="off"
-                  value={searchTerm}
-                  onChange={this.onSearch}
-                />
-                {this.isSearching && (
-                  <LoadingSpinner style={this.spinnerStyle} />
-                )}
-              </div>
-              {this.count}
-            </div>
-            {this.isLoading && <LoaderSkeleton />}
-            {!this.isLoading && (
-              <TagValueList
-                db={db}
-                service={service}
-                values={tagValues}
-                tagKey={tagKey}
-                filter={filter}
-                onLoadMoreValues={this.handleLoadMoreValues}
-                isLoadingMoreValues={loadingMore === RemoteDataState.Loading}
-                shouldShowMoreValues={limit < count}
-                loadMoreCount={this.loadMoreCount}
+        <div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
+          <div className="flux-schema--header" onClick={this.handleInputClick}>
+            <div className="flux-schema--filter">
+              <input
+                className="form-control input-xs"
+                placeholder={`Filter within ${tagKey}`}
+                type="text"
+                spellCheck={false}
+                autoComplete="off"
+                value={searchTerm}
+                onChange={this.onSearch}
               />
-            )}
+              {this.isSearching && <LoadingSpinner style={this.spinnerStyle} />}
+            </div>
+            {this.count}
           </div>
-        )}
+          {this.isLoading && <LoaderSkeleton />}
+          {!this.isLoading && (
+            <TagValueList
+              db={db}
+              service={service}
+              values={tagValues}
+              tagKey={tagKey}
+              filter={filter}
+              onLoadMoreValues={this.handleLoadMoreValues}
+              isLoadingMoreValues={loadingMore === RemoteDataState.Loading}
+              shouldShowMoreValues={limit < count}
+              loadMoreCount={this.loadMoreCount}
+            />
+          )}
+        </div>
       </div>
     )
   }
@@ -313,7 +313,7 @@ export default class TagListItem extends PureComponent<Props, State> {
     return (
       !isOpen &&
       (loadingAll === RemoteDataState.NotStarted ||
-        loadingAll !== RemoteDataState.Error)
+        loadingAll === RemoteDataState.Error)
     )
   }
 
diff --git a/ui/src/flux/components/TagValueListItem.tsx b/ui/src/flux/components/TagValueListItem.tsx
index ffc88b61ac..19b992658d 100644
--- a/ui/src/flux/components/TagValueListItem.tsx
+++ b/ui/src/flux/components/TagValueListItem.tsx
@@ -48,7 +48,7 @@ class TagValueListItem extends PureComponent<Props, State> {
 
   public render() {
     const {db, service, value} = this.props
-    const {searchTerm} = this.state
+    const {searchTerm, isOpen} = this.state
 
     return (
       <div className={this.className} onClick={this.handleClick}>
@@ -65,35 +65,33 @@ class TagValueListItem extends PureComponent<Props, State> {
             </div>
           </CopyToClipboard>
         </div>
-        {this.state.isOpen && (
-          <div className="flux-schema--children">
-            {this.isLoading && <LoaderSkeleton />}
-            {!this.isLoading && (
-              <>
-                {!!this.tags.length && (
-                  <div className="flux-schema--filter">
-                    <input
-                      className="form-control input-xs"
-                      placeholder={`Filter within ${value}`}
-                      type="text"
-                      spellCheck={false}
-                      autoComplete="off"
-                      value={searchTerm}
-                      onClick={this.handleInputClick}
-                      onChange={this.onSearch}
-                    />
-                  </div>
-                )}
-                <TagList
-                  db={db}
-                  service={service}
-                  tags={this.tags}
-                  filter={this.filter}
-                />
-              </>
-            )}
-          </div>
-        )}
+        <div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
+          {this.isLoading && <LoaderSkeleton />}
+          {!this.isLoading && (
+            <>
+              {!!this.tags.length && (
+                <div className="flux-schema--filter">
+                  <input
+                    className="form-control input-xs"
+                    placeholder={`Filter within ${value}`}
+                    type="text"
+                    spellCheck={false}
+                    autoComplete="off"
+                    value={searchTerm}
+                    onClick={this.handleInputClick}
+                    onChange={this.onSearch}
+                  />
+                </div>
+              )}
+              <TagList
+                db={db}
+                service={service}
+                tags={this.tags}
+                filter={this.filter}
+              />
+            </>
+          )}
+        </div>
       </div>
     )
   }
@@ -177,7 +175,7 @@ class TagValueListItem extends PureComponent<Props, State> {
     return (
       !isOpen &&
       (loading === RemoteDataState.NotStarted ||
-        loading !== RemoteDataState.Error)
+        loading === RemoteDataState.Error)
     )
   }
 }
diff --git a/ui/src/style/components/time-machine/flux-explorer.scss b/ui/src/style/components/time-machine/flux-explorer.scss
index 635ff1dcce..36a9831102 100644
--- a/ui/src/style/components/time-machine/flux-explorer.scss
+++ b/ui/src/style/components/time-machine/flux-explorer.scss
@@ -27,6 +27,10 @@ $flux-tree-gutter: 11px;
   }
 }
 
+.flux-schema--children.hidden {
+  display: none;
+}
+
 .flux-schema-tree__empty {
   height: $flux-tree-indent;
   display: flex;