From 0b329fc41a6f9891171eb01639741556ff89aa07 Mon Sep 17 00:00:00 2001
From: alexandraRamanenka <sasha@form.io>
Date: Thu, 17 Oct 2024 17:21:56 +0300
Subject: [PATCH] FIO-7195: Fixes an issue where Radio/SelectBoxes will show
 values instead of labels on View tab and in DataTable

---
 src/components/_classes/list/ListComponent.js |  4 ++--
 src/components/radio/Radio.js                 | 11 +++++++----
 src/components/selectboxes/SelectBoxes.js     |  9 +++++++--
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/_classes/list/ListComponent.js b/src/components/_classes/list/ListComponent.js
index 0fddb82b27..b0d26f8670 100644
--- a/src/components/_classes/list/ListComponent.js
+++ b/src/components/_classes/list/ListComponent.js
@@ -22,7 +22,7 @@ export default class ListComponent extends Field {
 
   get selectData() {
     const selectData = _.get(this.root, 'submission.metadata.selectData', {});
-    return _.get(selectData, this.path);
+    return _.get(selectData, this.path) || this.component.selectData;
   }
 
   get dataReady() {
@@ -145,7 +145,7 @@ export default class ListComponent extends Field {
   set itemsLoaded(promise) {
     this._itemsLoaded = promise;
   }
-  
+
   handleLoadingError(err) {
     this.loading = false;
     if (err.networkError) {
diff --git a/src/components/radio/Radio.js b/src/components/radio/Radio.js
index 4dd8764882..cdb15ae7d5 100644
--- a/src/components/radio/Radio.js
+++ b/src/components/radio/Radio.js
@@ -282,13 +282,16 @@ export default class RadioComponent extends ListComponent {
       value = _.toString(value);
     }
 
-    const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';
-    if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {
+    const shouldUseSelectData = (options.modalPreview || this.inDataTable)
+      && this.component.dataSrc === 'url' && (this.loadedOptions.length || this.selectData);
+    if (this.component.dataSrc !== 'values' && !shouldUseSelectData) {
       return value;
     }
 
-    const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;
-    const option = _.find(values, (v) => v.value === value);
+    const values = shouldUseSelectData ? this.loadedOptions : this.component.values;
+    const option = !values?.length && shouldUseSelectData ? {
+      label: this.itemTemplate(this.selectData),
+    } : _.find(values, (v) => v.value === value);
 
     if (!value) {
       return _.get(option, 'label', '');
diff --git a/src/components/selectboxes/SelectBoxes.js b/src/components/selectboxes/SelectBoxes.js
index 84edebc4d3..cc8fb07cc8 100644
--- a/src/components/selectboxes/SelectBoxes.js
+++ b/src/components/selectboxes/SelectBoxes.js
@@ -200,8 +200,13 @@ export default class SelectBoxesComponent extends RadioComponent {
     }
 
     if (this.isSelectURL) {
-      if (options.modalPreview && this.loadedOptions) {
-        return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+      if (options.modalPreview || this.options.readOnly || this.inDataTable) {
+        const checkedItems = _.keys(_.pickBy(value, (val) => val));
+        if (this.selectData?.length === checkedItems.length) {
+          return this.selectData.map(item => this.itemTemplate(item)).join(', ');
+        } else if (this.loadedOptions?.length) {
+          return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+        }
       }
       return _(value).pickBy((val) => val).keys().join(', ');
     }