fix: observe options as they might not be loaded on the first render

Author: r0b1n

packages/pluggableWidgets/dropdown-sort-web/CHANGELOG.md

@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - We fixed an issue with Gallery widget causing errors when Mendix app is being used in an iframe.
 
+- We fixed an issue with Dropdown sort widget not showing attribute captions correctly.
+
 ## [1.2.2] - 2025-03-31
 
 ### Fixed

packages/shared/widget-plugin-sorting/src/helpers/SortStoreProvider.ts

@@ -1,15 +1,10 @@
-import { AttributeMetaData, DynamicValue } from "mendix";
 import { SortOrderStore } from "../stores/SortOrderStore";
 import { SortStoreHost } from "../stores/SortStoreHost";
 import { SortInstruction } from "../types/store";
 
 interface SortStoreProviderSpec {
     host: SortStoreHost;
     initSortOrder?: SortInstruction[];
-    attributes: Array<{
-        attribute: AttributeMetaData;
-        caption?: DynamicValue<string>;
-    }>;
 }
 
 export class SortStoreProvider {
@@ -18,11 +13,7 @@ export class SortStoreProvider {
 
     constructor(spec: SortStoreProviderSpec) {
         this._host = spec.host;
-        const options = spec.attributes.map(item => ({
-            value: item.attribute.id,
-            caption: item.caption?.value ?? "empty"
-        }));
-        this.store = new SortOrderStore({ options, initSortOrder: spec.initSortOrder });
+        this.store = new SortOrderStore({ initSortOrder: spec.initSortOrder });
     }
 
     setup(): () => void {

packages/shared/widget-plugin-sorting/src/react/hocs/withLinkedSortStore.tsx

@@ -20,11 +20,12 @@ export function withLinkedSortStore<P extends RequiredProps>(
             () =>
                 new SortStoreProvider({
                     host: props.sortAPI.host,
-                    initSortOrder: props.sortAPI.host.sortOrder,
-                    attributes: props.attributes
+                    initSortOrder: props.sortAPI.host.sortOrder
                 })
         );
 
+        store.setProps(props);
+
         return <Component {...props} sortStore={store} />;
     };
 }

packages/shared/widget-plugin-sorting/src/stores/SortOrderStore.ts

@@ -2,32 +2,51 @@ import { PlainJs, Serializable } from "@mendix/filter-commons/typings/settings";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { action, computed, makeObservable, observable } from "mobx";
 import { BasicSortStore, Option, SortInstruction } from "../types/store";
+import { AttributeMetaData, DynamicValue } from "mendix";
 
 type StorableState = Array<[number, "asc" | "desc"]>;
 
+type Props = {
+    attributes: Array<{
+        attribute: AttributeMetaData;
+        caption?: DynamicValue<string>;
+    }>;
+};
+
 export class SortOrderStore implements BasicSortStore, Serializable {
     private readonly _sortOrder: SortInstruction[] = [];
 
     readonly id = `SortOrderStore@${generateUUID()}`;
-    readonly options: Option[];
-    readonly idToIndex: Map<string, number>;
-
-    constructor(spec: { options?: Option[]; initSortOrder?: SortInstruction[] } = {}) {
-        const { options = [], initSortOrder = [] } = spec;
+    options: Option[] = [];
+    readonly idToIndex: Map<string, number> = new Map();
 
-        this.options = [...options];
-        this.idToIndex = new Map(options.map((option, index) => [option.value, index]));
+    constructor(spec: { initSortOrder?: SortInstruction[] }) {
+        const { initSortOrder = [] } = spec;
         this._sortOrder = [...initSortOrder];
 
         makeObservable<this, "_sortOrder">(this, {
             _sortOrder: observable,
+            options: observable.struct,
             sortOrder: computed,
             setSortOrder: action,
+            setProps: action,
             push: action,
             remove: action
         });
     }
 
+    setProps(props: Props): void {
+        this.options = props.attributes.map(item => ({
+            value: item.attribute.id,
+            caption: item.caption?.value ?? "<empty>"
+        }));
+
+        this.idToIndex.clear();
+        this.options.forEach((option, index) => {
+            this.idToIndex.set(option.value, index);
+        });
+    }
+
     get sortOrder(): SortInstruction[] {
         return [...this._sortOrder];
     }