FIO-8234: Fixes an issue where Select with Resource data source rende…

…rs values instead of labels in the read only mode
formio · May 28, 2024 · dedc19b · dedc19b
1 parent 2f14fbf
commit dedc19b
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 2 deletions.
diff --git a/src/components/select/Select.js b/src/components/select/Select.js
@@ -267,9 +267,10 @@ export default class SelectComponent extends ListComponent {
 
   selectValueAndLabel(data) {
     const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));
+    const readOnlyResourceLabelData = this.options.readOnly && (this.component.dataSrc === 'resource' || this.component.dataSrc === 'url') && this.selectData;
     return {
       value,
-      label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : data, value)
+      label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : readOnlyResourceLabelData || data, value)
     };
   }
 

diff --git a/src/components/select/Select.unit.js b/src/components/select/Select.unit.js
@@ -32,6 +32,7 @@ import {
   comp20,
   comp21,
   comp22,
+  comp23,
 } from './fixtures';
 
 // eslint-disable-next-line max-statements
@@ -1276,5 +1277,69 @@ describe('Select Component with Entire Object Value Property', () => {
       done();
     });
   });
+
+  it('Should render label for Select components when Data Source is Resource in read only mode', (done) => {
+    const element = document.createElement('div');
+    Formio.createForm(element, comp23, { readOnly: true }).then((form) => {
+      const select = form.getComponent('select');
+      form.setSubmission({
+        metadata: {
+          selectData: {
+            select: {
+              data: {
+                textField1: 'A',
+              },
+            },
+          },
+          timezone: 'Europe/Kiev',
+          offset: 180,
+          origin: 'http://localhost:3001',
+          referrer: '',
+          browserName: 'Netscape',
+          userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36',
+          pathName: '/',
+          onLine: true,
+          headers: {
+            host: 'qvecgdgwpwujbpi.localhost:3000',
+            connection: 'keep-alive',
+            'content-length': '457',
+            'sec-ch-ua': '"Google Chrome";v="125", "Chromium";v="125", "Not.A/Brand";v="24"',
+            accept: 'application/json',
+            'content-type': 'application/json',
+            'sec-ch-ua-mobile': '?0',
+            'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36',
+            'sec-ch-ua-platform': '"Windows"',
+            origin: 'http://localhost:3001',
+            'sec-fetch-site': 'cross-site',
+            'sec-fetch-mode': 'cors',
+            'sec-fetch-dest': 'empty',
+            referer: 'http://localhost:3001/',
+            'accept-encoding': 'gzip, deflate, br, zstd',
+            'accept-language': 'en-US,en;q=0.9,ru-RU;q=0.8,ru;q=0.7',
+          },
+        },
+        data: {
+          select: 1,
+          select1: {
+            textField1: 'A',
+            textField2: '1',
+            submit: true,
+          },
+          submit: true,
+        },
+        state: 'submitted',
+      });
+
+      setTimeout(() => {
+        const previewSelect = select.element.querySelector('[aria-selected="true"] span');
+
+        assert.equal(previewSelect.innerHTML, 'A', 'Should show label as a selected value' +
+          ' for Select component');
+
+        done();
+      }, 300);
+    })
+      .catch((err) => done(err));
+  });
 });
 
diff --git a/src/components/select/fixtures/comp23.js b/src/components/select/fixtures/comp23.js
@@ -0,0 +1,38 @@
+export default {
+  title: 'FIO-8234',
+  name: 'fio8234',
+  path: 'fio8234',
+  type: 'form',
+  display: 'form',
+  components: [
+    {
+      label: 'Select',
+      widget: 'choicesjs',
+      tableView: true,
+      dataSrc: 'resource',
+      data: {
+        resource: '665446284c9b0163c3e0c7e6',
+      },
+      template: '<span>{{ item.data.textField1 }}</span>',
+      validate: {
+        select: false,
+      },
+      key: 'select',
+      type: 'select',
+      searchField: 'data.textField2__regex',
+      input: true,
+      noRefreshOnScroll: false,
+      addResource: false,
+      reference: false,
+      valueProperty: 'data.textField2',
+    },
+    {
+      type: 'button',
+      label: 'Submit',
+      key: 'submit',
+      disableOnInvalid: true,
+      input: true,
+      tableView: false,
+    },
+  ],
+};
diff --git a/src/components/select/fixtures/index.js b/src/components/select/fixtures/index.js
@@ -20,4 +20,5 @@ import comp19 from './comp19';
 import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22 };
+import comp23 from './comp23';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23 };