@sebgroup/green-core 3.17.2 → 3.17.3

package/components/dropdown/dropdown.component.d.ts

@@ -133,7 +133,6 @@ declare class Dropdown extends GdsFormControlElement implements OptionsContainer
      * Update value assignment and request update when the light DOM changes.
      */
     private _handleLightDOMChange;
-    private _handleValueChange;
     /**
      * Emits `gds-ui-state`event and does some other house-keeping when the open state changes.
      */

package/components/dropdown/dropdown.component.js

@@ -277,14 +277,19 @@ let Dropdown = class extends GdsFormControlElement {
    * If the dropdown is in multiple mode, this will be a comma separated list of the selected values.
    */
   get displayValue() {
+    if (this.value === void 0) {
+      return this.placeholder?.innerText || "";
+    }
     let displayValue;
     if (Array.isArray(this.value)) {
       displayValue = this.value.slice(0, 5).reduce(
-        (acc, cur) => acc + this.options.find((v) => v.value === cur)?.innerText + ", ",
+        (acc, cur) => acc + this.options.find((v) => this.compareWith(v.value, cur))?.innerText + ", ",
         ""
       ).slice(0, -2).replace(/(.{25})(.*)/, "$1...");
     } else {
-      displayValue = this.options.find((v) => v.selected)?.innerText;
+      displayValue = this.options.find(
+        (v) => this.compareWith(v.value, this.value)
+      )?.innerText;
     }
     return displayValue || this.placeholder?.innerText || "";
   }
@@ -307,7 +312,6 @@ let Dropdown = class extends GdsFormControlElement {
     this.addEventListener("blur", __privateGet(this, _handleBlur));
     this.updateComplete.then(() => {
       this._handleLightDOMChange();
-      this._handleValueChange();
       this._handleOpenChange();
     });
   }
@@ -412,6 +416,7 @@ let Dropdown = class extends GdsFormControlElement {
           id="listbox"
           .multiple="${ifDefined(this.multiple)}"
           .compareWith="${this.compareWith}"
+          .selection="${this.multiple ? this.value : [this.value]}"
           @change="${__privateMethod(this, _handleSelectionChange, handleSelectionChange_fn)}"
           @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
           @keydown=${__privateGet(this, _handleListboxKeyDown)}
@@ -446,7 +451,6 @@ let Dropdown = class extends GdsFormControlElement {
     this.requestUpdate();
     __privateSet(this, _optionElements, this.querySelectorAll("[gds-element=gds-option]"));
     if (this.multiple) {
-      this._handleValueChange();
       return;
     }
     if (this.value === void 0) {
@@ -458,17 +462,6 @@ let Dropdown = class extends GdsFormControlElement {
       this.options[0] && (this.options[0].selected = true);
       this.value = this.options[0]?.value;
     }
-    this._handleValueChange();
-  }
-  _handleValueChange() {
-    this._elListbox.then((listbox) => {
-      if (listbox) {
-        if (Array.isArray(this.value))
-          listbox.selection = this.value;
-        else
-          listbox.selection = [this.value];
-      }
-    });
   }
   _handleOpenChange() {
     const open = this.open;
@@ -603,9 +596,6 @@ __decorateClass([
     characterData: true
   })
 ], Dropdown.prototype, "_handleLightDOMChange", 1);
-__decorateClass([
-  watch("value")
-], Dropdown.prototype, "_handleValueChange", 1);
 __decorateClass([
   watch("open")
 ], Dropdown.prototype, "_handleOpenChange", 1);