From 4a0b22b5778dd233a7db1717a57efd649fb5420d Mon Sep 17 00:00:00 2001
From: alexandraRamanenka
 <60643585+alexandraRamanenka@users.noreply.github.com>
Date: Wed, 7 Feb 2024 02:24:53 -0500
Subject: [PATCH] FIO-7632: Fixes an issue where HTML tags are added to the
 HTML5 Select metadata (#5499)

* FIO-7632: Fixes an issue where HTML tags are added to the HTML5 Select metadata

* Fixed failing tests
---
 src/components/select/Select.js          |   3 +-
 src/components/select/Select.unit.js     |  30 ++++++-
 src/components/select/fixtures/comp21.js | 104 +++++++++++++++++++++++
 src/components/select/fixtures/index.js  |   3 +-
 4 files changed, 137 insertions(+), 3 deletions(-)
 create mode 100644 src/components/select/fixtures/comp21.js

diff --git a/src/components/select/Select.js b/src/components/select/Select.js
index 67dcc9fa6f..4fc820f0bc 100644
--- a/src/components/select/Select.js
+++ b/src/components/select/Select.js
@@ -405,6 +405,7 @@ export default class SelectComponent extends ListComponent {
 
   /* eslint-disable max-statements */
   setItems(items, fromSearch) {
+    this.selectItems = items;
     // If the items is a string, then parse as JSON.
     if (typeof items == 'string') {
       try {
@@ -958,7 +959,7 @@ export default class SelectComponent extends ListComponent {
       this.triggerUpdate(null, true);
 
       if (this.visible) {
-        this.setItems(this.selectOptions || []);
+        this.setItems(this.selectItems || []);
       }
 
       this.focusableElement = input;
diff --git a/src/components/select/Select.unit.js b/src/components/select/Select.unit.js
index bc96c83e78..59fdbefad8 100644
--- a/src/components/select/Select.unit.js
+++ b/src/components/select/Select.unit.js
@@ -29,7 +29,8 @@ import {
   comp17,
   comp18,
   comp19,
-  comp20
+  comp20,
+  comp21,
 } from './fixtures';
 
 // eslint-disable-next-line max-statements
@@ -949,6 +950,33 @@ describe('Select Component', () => {
     }).catch(done);
   });
 
+  it('Should provide correct metadata.selectData for HTML5 Select', (done) => {
+    const element = document.createElement('div');
+
+    Formio.createForm(element, comp21).then(form => {
+      const select = form.getComponent('animals');
+      const checkbox = form.getComponent('checkbox');
+      const value = 'dog';
+      select.setValue(value);
+
+      setTimeout(()=> {
+        checkbox.setValue(true);
+        setTimeout(() => {
+          const submit = form.getComponent('submit');
+          const clickEvent = new Event('click');
+          const submitBtn = submit.refs.button;
+          submitBtn.dispatchEvent(clickEvent);
+
+          setTimeout(() => {
+            const metadata = form.submission.metadata.selectData.animals2;
+            assert.equal(metadata.label, 'Dog');
+            done();
+          }, 200);
+        }, 300);
+      }, 200);
+    }).catch(done);
+  });
+
   it('OnBlur validation should work properly with Select component', function(done) {
     this.timeout(0);
     const element = document.createElement('div');
diff --git a/src/components/select/fixtures/comp21.js b/src/components/select/fixtures/comp21.js
new file mode 100644
index 0000000000..198eb7189d
--- /dev/null
+++ b/src/components/select/fixtures/comp21.js
@@ -0,0 +1,104 @@
+export default {
+  title: 'FIO-7632',
+  name: 'fio7632',
+  path: 'fio7632',
+  type: 'form',
+  display: 'form',
+  components: [
+    {
+      collapsible: false,
+      key: 'panel',
+      type: 'panel',
+      label: 'Panel',
+      input: false,
+      tableView: false,
+      components: [
+        {
+          label: 'Animals',
+          widget: 'html5',
+          tableView: true,
+          data: {
+            values: [
+              {
+                label: 'Dog',
+                value: 'dog',
+              },
+              {
+                label: 'Cat',
+                value: 'cat',
+              },
+              {
+                label: 'Horse',
+                value: 'horse',
+              },
+            ],
+          },
+          key: 'animals',
+          type: 'select',
+          input: true,
+        },
+        {
+          label: 'Checkbox',
+          tableView: false,
+          key: 'checkbox',
+          type: 'checkbox',
+          input: true,
+        },
+        {
+          label: 'Animals2',
+          widget: 'html5',
+          tableView: true,
+          data: {
+            values: [
+              {
+                label: 'Dog',
+                value: 'dog',
+              },
+              {
+                label: 'Cat',
+                value: 'cat',
+              },
+              {
+                label: 'Horse',
+                value: 'horse',
+              },
+            ],
+          },
+          calculateValue: 'if (data.checkbox === true) {\n  value = data.animals;\n}',
+          key: 'animals2',
+          logic: [
+            {
+              name: 'disable',
+              trigger: {
+                type: 'javascript',
+                javascript: 'result = row.checkbox === true;',
+              },
+              actions: [
+                {
+                  name: 'disable',
+                  type: 'property',
+                  property: {
+                    label: 'Disabled',
+                    value: 'disabled',
+                    type: 'boolean',
+                  },
+                  state: true,
+                },
+              ],
+            },
+          ],
+          type: 'select',
+          input: true,
+        },
+        {
+          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
index 0fa3a99cc4..7e0e7d9307 100644
--- a/src/components/select/fixtures/index.js
+++ b/src/components/select/fixtures/index.js
@@ -18,4 +18,5 @@ import comp17 from './comp17';
 import comp18 from './comp18';
 import comp19 from './comp19';
 import comp20 from './comp20';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20 };
+import comp21 from './comp21';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21 };