fix(dashboard): filter-select is mistakenly resetting value

dashboard/src/components/filter/filter-select/render.tsx

@@ -1,13 +1,12 @@
 import { Select } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
-import { useEffect } from 'react';
 import { useRenderContentModelContext } from '~/contexts';
 import { FilterMetaInstance, FilterSelectConfigInstance } from '~/model';
 import { FilterSelectItem } from '../select-item';
 
 interface IFilterSelect extends Omit<FilterMetaInstance, 'key' | 'type' | 'config'> {
   config: FilterSelectConfigInstance;
-  value: $TSFixMe;
+  value: string;
   onChange: (v: string, forceSubmit?: boolean) => void;
 }
 
@@ -17,17 +16,6 @@ export const FilterSelect = observer(({ label, config, value, onChange }: IFilte
   const { state, error } = model.getDataStuffByID(config.options_query_id);
   const loading = state === 'loading';
 
-  useEffect(() => {
-    const { default_selection_count } = config;
-    if (!default_selection_count) {
-      return;
-    }
-    const newValue = config.options[0]?.value ?? '';
-
-    console.log('Selecting the first option by default. New value: ', newValue);
-    onChange(newValue, true);
-  }, [config.default_selection_count, config.options]); // excluding onChange from deps, since it's always re-created
-
   return (
     <Select
       label={label}

dashboard/src/model/meta-model/dashboard/content/filter/widgets/select.ts

@@ -1,6 +1,7 @@
-import { Instance, types } from 'mobx-state-tree';
+import { addDisposer, getParent, getRoot, Instance, types } from 'mobx-state-tree';
 import { FilterBaseSelectConfigMeta } from './select-base';
 import { shallowToJS } from '~/utils/shallow-to-js';
+import { reaction, toJS } from 'mobx';
 
 export const FilterSelectConfigMeta = types
   .compose(
@@ -32,6 +33,15 @@ export const FilterSelectConfigMeta = types
     getSelectOption(value: string) {
       return self.options.find((o) => o.value === value);
     },
+    get default_selection() {
+      if (!self.usingQuery) {
+        return self.default_value;
+      }
+      if (self.default_selection_count > 0 && self.options.length > 0) {
+        return self.options[0].value;
+      }
+      return '';
+    },
   }))
   .actions((self) => ({
     setRequired(required: boolean) {
@@ -43,6 +53,24 @@ export const FilterSelectConfigMeta = types
     setWidth(v: string) {
       self.width = v;
     },
+    setDefaultSelection() {
+      // @ts-expect-error getRoot type
+      const filters = getRoot(self).content.filters;
+      // @ts-expect-error Property 'key' does not exist on type 'IStateTreeNode<IAnyStateTreeNode>
+      const key = getParent(self).key;
+      filters.setValueByKey(key, self.default_selection);
+    },
+  }))
+  .actions((self) => ({
+    afterCreate() {
+      addDisposer(
+        self,
+        reaction(() => toJS(self.default_selection), self.setDefaultSelection, {
+          fireImmediately: true,
+          delay: 0,
+        }),
+      );
+    },
   }));
 
 export type FilterSelectConfigInstance = Instance<typeof FilterSelectConfigMeta>;