fixed creating list of headers in stacking view when it doesn't exist. start of making fields dropdown more reactive.

1 files changed, 10 insertions, 8 deletions

diff --git a/src/client/views/FieldsDropdown.tsx b/src/client/views/FieldsDropdown.tsx
index e7ab6a180..74ff8ffd4 100644
--- a/src/client/views/FieldsDropdown.tsx
+++ b/src/client/views/FieldsDropdown.tsx
@@ -6,7 +6,7 @@
  *     this list is then pruned down to only include fields that are not marked in Documents.ts to be non-filterable
  */
 
-import { computed, makeObservable, observable, runInAction } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import Select from 'react-select';
@@ -24,6 +24,7 @@ interface fieldsDropdownProps {
     placeholder?: string | (() => string);
     showPlaceholder?: true; // if true, then input field always shows the placeholder value; otherwise, it shows the current selection
     addedFields?: string[];
+    isInactive?: boolean;
 }
 
 @observer
@@ -57,10 +58,11 @@ export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps
         const filteredOptions = ['author', ...(this._newField ? [this._newField] : []), ...(this._props.addedFields ?? []), ...this.fieldsOfDocuments.filter(facet => facet[0] === facet.charAt(0).toUpperCase())];
 
         Object.entries(DocOptions)
-            .filter(opts => opts[1].filterable)
-            .forEach((pair: [string, FInfo]) => filteredOptions.push(pair[0]));
+            .filter(opts => opts[1] instanceof FInfo && opts[1].filterable)
+            .forEach((pair: [string, unknown]) => filteredOptions.push(pair[0]));
         const options = filteredOptions.sort().map(facet => ({ value: facet, label: facet }));
 
+        console.log(this._props.isInactive);
         return (
             <Select
                 styles={{
@@ -77,11 +79,13 @@ export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps
                         ...baseStyles,
                         color: SnappingManager.userColor,
                         background: SnappingManager.userBackgroundColor,
+                        display: this._props.isInactive ? 'none' : undefined,
                     }),
                     placeholder: (baseStyles /* , state */) => ({
                         ...baseStyles,
                         color: SnappingManager.userColor,
                         background: SnappingManager.userBackgroundColor,
+                        display: this._props.isInactive ? 'none' : undefined,
                     }),
                     input: (baseStyles /* , state */) => ({
                         ...baseStyles,
@@ -104,14 +108,12 @@ export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps
                 options={options}
                 isMulti={false}
                 onChange={val => this._props.selectFunc((val as { value: string; label: string }).value)}
-                onKeyDown={e => {
+                onKeyDown={action(e => {
                     if (e.key === 'Enter') {
-                        runInAction(() => {
-                            this._props.selectFunc((this._newField = (e.nativeEvent.target as HTMLSelectElement)?.value));
-                        });
+                        this._props.selectFunc((this._newField = (e.nativeEvent.target as HTMLSelectElement)?.value));
                     }
                     e.stopPropagation();
-                }}
+                })}
                 onMenuClose={this._props.menuClose}
                 closeMenuOnSelect
                 value={this._props.showPlaceholder ? null : undefined}