Merge pull request #2815 from infor-design/2612-ids-dropdown-dynamic-…

…option-change-fix-angular

2612 - ids-dropdown dynamic-option change fix for angular

doc/CHANGELOG.md

@@ -10,6 +10,7 @@
 
 - `[Card]` Adds `draggable` attribute to ids-card which allows card to be used in drag and drop scenarios. ([#2423](https://github.com/infor-design/enterprise-wc/issues/2423))
 - `[Datagrid]` Fix Clear Row / Eraser button so that changes persist throughout pagination. ([#2615](https://github.com/infor-design/enterprise-wc/issues/2615))
+- `[Dropdown|ListBox]` Fix `ids-dropdown` so that it doesn't lose track of it's value when `ids-list-box-option` is dynamically set in Angular. ([#2612](https://github.com/infor-design/enterprise-wc/issues/2612))
 - `[Dropdown]` Fixed IdsDropdown default value.  There was a bug where the value property was not working properly with dynamic data. ([#2727](https://github.com/infor-design/enterprise-wc/issues/2727))
 - `[Datagrid]` Fix Clear Row / Eraser button so that changes persist throughout pagination. ([#2615]https://github.com/infor-design/enterprise-wc/issues/2615)
 - `[Datagrid]` Added async/await to beforecelledit. ([#2726]https://github.com/infor-design/enterprise-wc/issues/2726)

src/components/ids-dropdown/ids-dropdown.ts

@@ -763,7 +763,6 @@ export default class IdsDropdown extends Base {
       this.input?.setAttribute(attributes.READONLY, 'true');
       const initialValue: string | null | undefined = this.selectedOption?.textContent?.trim();
       if (this.input) this.input.value = initialValue || '';
-      this.loadDataSet(this.optionsData);
       (window.getSelection() as Selection).removeAllRanges();
       this.replaceTriggerIcon(this.dropdownIcon || 'dropdown');
     }

src/components/ids-list-box/ids-list-box-option.ts

@@ -60,27 +60,30 @@ export default class IdsListBoxOption extends Base {
 
   /**
    * Establish Internal Event Handlers
-   * @private
-   * @returns {object} The object for chaining.
+   * @returns {void}
    */
-  #attachEventHandlers() {
-    const mutationObserver = (mutationList: any[]) => {
-      for (const m of mutationList) {
-        const assignedNode = this.shadowRoot?.querySelector('slot')?.assignedNodes()?.[0];
-        if (m.target === this || m.target === assignedNode) {
-          this.parentElement?.dispatchEvent(new CustomEvent('slotchange', { bubbles: true }));
+  #attachEventHandlers(): void {
+    const slot = this.shadowRoot?.querySelector('slot');
+    const listBox = this.parentElement;
+
+    this.offEvent('slotchange.list-box-option', slot);
+    this.onEvent('slotchange.list-box-option', slot, () => {
+      const assignedNode = slot?.assignedNodes()?.[0];
+      const mutationObserver = (mutationList: any[]) => {
+        for (const m of mutationList) {
+          if (m.target === this || m.target === assignedNode) {
+            listBox?.dispatchEvent(new CustomEvent('slotchange', { bubbles: true }));
+          }
         }
-      }
-    };
-
-    const observer = new MutationObserver(mutationObserver);
-    observer.observe(this, {
-      childList: true,
-      subtree: true,
-      characterData: true
+      };
+
+      const observer = new MutationObserver(mutationObserver);
+      observer.observe(this, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
     });
-
-    return this;
   }
 
   #hideEmptyGroupOption() {