[#6229] fixed display fields extraction

ui/src/components/records/RecordsList.svelte

@@ -153,12 +153,11 @@
             listFields.unshift("*");
         }
 
-        const expandFields = [];
+        let expandFields = [];
         for (const field of relFields) {
-            const expandItem = CommonHelper.getExpandPresentableRelField(field, $collections, 2);
-            if (expandItem) {
-                expandFields.push(expandItem);
-            }
+            expandFields = expandFields.concat(
+                CommonHelper.getExpandPresentableRelFields(field, $collections, 2),
+            );
         }
 
         return ApiClient.collection(collection.id)

ui/src/components/records/RecordsPicker.svelte

@@ -61,22 +61,16 @@
     }
 
     function getExpand() {
-        let expand = "";
+        let expands = [];
 
         const presentableRelFields = collection?.fields?.filter(
             (f) => !f.hidden && f.presentable && f.type == "relation",
         );
         for (const field of presentableRelFields) {
-            const expandItem = CommonHelper.getExpandPresentableRelField(field, $collections, 2);
-            if (expandItem) {
-                if (expand != "") {
-                    expand += ",";
-                }
-                expand += expandItem;
-            }
+            expands = expands.concat(CommonHelper.getExpandPresentableRelFields(field, $collections, 2));
         }
 
-        return expand;
+        return expands.join(",");
     }
 
     async function loadSelected() {
@@ -259,6 +253,8 @@
         {#each list as record (record.id)}
             {@const selected = isSelected(record)}
 
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
             <div
                 tabindex="0"
                 class="list-item handle"

ui/src/components/records/fields/RelationField.svelte

@@ -64,18 +64,12 @@
 
         isLoading = true;
 
-        let expand = "";
+        let expands = [];
         const presentableRelFields = $collections
             .find((c) => c.id == field.collectionId)
             ?.fields?.filter((f) => !f.hidden && f.presentable && f.type == "relation");
         for (const field of presentableRelFields) {
-            const expandItem = CommonHelper.getExpandPresentableRelField(field, $collections, 2);
-            if (expandItem) {
-                if (expand != "") {
-                    expand += ",";
-                }
-                expand += expandItem;
-            }
+            expands = expands.concat(CommonHelper.getExpandPresentableRelFields(field, $collections, 2));
         }
 
         // batch load all selected records to avoid parser stack overflow errors
@@ -91,7 +85,7 @@
                 ApiClient.collection(field.collectionId).getFullList(batchSize, {
                     filter: filters.join("||"),
                     fields: "*:excerpt(200)",
-                    expand: expand,
+                    expand: expands.join(","),
                     requestKey: null,
                 }),
             );

ui/src/utils/CommonHelper.js

@@ -1342,38 +1342,38 @@ export default class CommonHelper {
     }
 
     /**
-     * Returns a combined expand string with the presentable nested relation fields (e.g. `base.sub1.sub2`).
+     * Returns an expand list with the presentable nested relation fields (e.g. [base.sub1.sub11, base.sub2]).
      *
      * @param  {Object} baseRelField
      * @param  {Array} collections
      * @param  {Number} maxNestedLevel
-     * @return {String}
+     * @return {Array}
      */
-    static getExpandPresentableRelField(baseRelField, collections, maxNestedLevel = 2) {
-        for (const collection of collections) {
-            if (baseRelField.collectionId != collection.id) {
-                continue;
-            }
+    static getExpandPresentableRelFields(baseRelField, collections, maxNestedLevel = 2) {
+        let result = [];
 
-
-            let expandItem = baseRelField.name
-
-            for (const field of collection.fields) {
-                if (!field.presentable || field.type != "relation") {
-                    continue
-                }
-                if (maxNestedLevel > 0) {
-                    const nestedExpandItem = CommonHelper.getExpandPresentableRelField(field, collections, maxNestedLevel-1)
-                    if (nestedExpandItem) {
-                        expandItem += ("." + nestedExpandItem)
-                    }
-                }
-            }
-
-            return expandItem;
+        const collection = collections.find((c) => c.id == baseRelField.collectionId)
+        if (!collection) {
+            return result;
         }
 
-        return "";
+        for (const field of collection.fields) {
+            if (!field.presentable || field.type != "relation" || maxNestedLevel <= 0) {
+                continue
+            }
+
+            const nestedExpands = CommonHelper.getExpandPresentableRelFields(field, collections, maxNestedLevel-1)
+            for (const expand of nestedExpands) {
+                result.push(baseRelField.name + "." + expand);
+            }
+        }
+
+        // add the base field if not already
+        if (!result.length) {
+            result.push(baseRelField.name);
+        }
+
+        return result;
     }
 
     /**