FIO-7195: Fixes an issue where Radio/SelectBoxes will show values ins…

…tead of labels on View tab and in DataTable
formio · Oct 17, 2024 · 0b329fc · 0b329fc
1 parent e072cbd
commit 0b329fc
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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(', ');
     }