From 92546f1f8af660e4b783addd516b0a2e00e35557 Mon Sep 17 00:00:00 2001
From: Jason Baker <jason@capsule42.com>
Date: Thu, 4 Apr 2024 08:46:19 -0700
Subject: [PATCH] fix(selection): selecting dynamic generated options no longer
 renders the lit comment #178

---
 .vscode/settings.json |  9 +++++++++
 src/auro-select.js    | 38 ++++++++++++++++++++++++++------------
 src/style.scss        |  4 ++++
 3 files changed, 39 insertions(+), 12 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..726f3b4
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+    "cSpell.words": [
+        "haspopup",
+        "menuoption",
+        "nocheckmark",
+        "selectmenu",
+        "valuestr"
+    ]
+}
diff --git a/src/auro-select.js b/src/auro-select.js
index cab6f26..ed5a799 100644
--- a/src/auro-select.js
+++ b/src/auro-select.js
@@ -38,7 +38,7 @@ import styleCss from "./style-css.js";
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @fires auroSelect-ready - Notifies that the component has finished initializing.
- * @fires auroSelect-valueSet - Notifies that the component has a new value set.
+ * @event auroSelect-valueSet - Notifies that the component has a new value set.
  */
 
 // build the component class
@@ -216,27 +216,41 @@ export class AuroSelect extends LitElement {
   }
 
   /**
-   * Adds the value string to the trigger.
-   * @param {string} str - The string to display in the trigger.
+   * Updates the displayed value in an Auro dropdown component based on the provided option.
+   * @param {string|HTMLElement} option - The option to display. If a string, a new span element with the value string is created. If an HTMLElement, the selected option is cloned and non-styling attributes are removed.
    * @private
    * @returns {void}
    */
-  updateDisplayedValue(str) {
+  updateDisplayedValue(option) {
     const dropdown = this.shadowRoot.querySelector('auro-dropdown');
     const triggerContentEl = dropdown.querySelector('#triggerFocus');
 
     // remove all existing rendered value(s)
+    triggerContentEl.querySelectorAll('auro-menuoption').forEach((elm) => {
+      elm.remove();
+    });
+
     triggerContentEl.querySelectorAll('[valuestr]').forEach((elm) => {
       elm.remove();
     });
 
-    // create a new element with the new value
-    const valueElem = document.createElement('span');
-    valueElem.setAttribute('valuestr', true);
-    valueElem.appendChild(document.createTextNode(str));
+    if (typeof option === 'string') {
+      // create a new span element with the value string
+      const valueElem = document.createElement('span');
+      valueElem.setAttribute('valuestr', true);
+      valueElem.appendChild(document.createTextNode(option));
 
-    // append the new element into the trigger content
-    triggerContentEl.appendChild(valueElem);
+      // append the new element into the trigger content
+      triggerContentEl.appendChild(valueElem);
+    } else {
+      // clone the selected option and remove attributes that style it
+      const clone = option.cloneNode(true);
+      clone.removeAttribute('selected');
+      clone.removeAttribute('class');
+
+      // insert the non-styled clone into the trigger
+      triggerContentEl.appendChild(clone);
+    }
   }
 
   /**
@@ -263,7 +277,7 @@ export class AuroSelect extends LitElement {
       this.optionSelected = this.menu.optionSelected;
       this.value = this.optionSelected.value;
 
-      this.updateDisplayedValue(this.optionSelected.innerHTML);
+      this.updateDisplayedValue(this.optionSelected);
 
       if (this.dropdown.isPopoverVisible) {
         this.dropdown.hide();
@@ -283,7 +297,7 @@ export class AuroSelect extends LitElement {
 
       this.validity = 'badInput';
 
-      // Capitilizes the first letter of each word in this.value string
+      // Capitalizes the first letter of each word in this.value string
       const valueStr = this.value.replace(/(^\w{1})|(\s+\w{1})/gu, (letter) => letter.toUpperCase());
 
       // Pass the new string to the trigger content
diff --git a/src/style.scss b/src/style.scss
index 210a275..0650f4d 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -48,6 +48,10 @@
   }
 }
 
+auro-menuoption {
+  pointer-events: none;
+}
+
 .menuWrapper {
   padding: var(--ds-size-50, $ds-size-50) 0;
 }