@synergy-design-system/mcp 1.17.1 → 1.17.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@synergy-design-system/mcp-v1.17.2](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.17.1...mcp/1.17.2) (2025-11-03)
+
+
+### Bug Fixes
+
+* 🐛 Async delimiter change for pre-selected value in syn-select not displayed ([#1061](https://github.com/synergy-design-system/synergy-design-system/issues/1061)) ([5f6d361](https://github.com/synergy-design-system/synergy-design-system/commit/5f6d36102b669cc34aa44cded47ef49559e74529))
+
 # [@synergy-design-system/mcp-v1.17.1](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.17.0...mcp/1.17.1) (2025-11-03)
 
 

package/metadata/checksum.txt

@@ -1 +1 @@
-555eddeb31ec5af0c88a3022cec753e1
+b6a28465b034f20e1e23da6403fb79e2

package/metadata/packages/components/components/syn-option/component.ts

@@ -77,18 +77,7 @@ export default class SynOption extends SynergyElement {
   private handleDefaultSlotChange() {
     if (this.isInitialized) {
       // When the label changes, tell the controller to update
-      customElements.whenDefined('syn-combobox').then(() => {
-        const controller = this.closest('syn-combobox');
-        if (controller) {
-          controller.handleDefaultSlotChange();
-        }
-      });
-      customElements.whenDefined('syn-select').then(() => {
-        const controller = this.closest('syn-select');
-        if (controller) {
-          controller.handleDefaultSlotChange();
-        }
-      });
+      this.triggerParentDefaultSlotChange();
     } else {
       this.isInitialized = true;
     }
@@ -145,6 +134,8 @@ export default class SynOption extends SynergyElement {
       value = delimiterToWhiteSpace(value, this.delimiter);
     }
     this.value = value;
+    // #1056 We need to trigger the parent component's default slot change, so it can update its value selection
+    this.triggerParentDefaultSlotChange();
   }
 
   /** Returns a plain text label based on the option's content. */
@@ -167,6 +158,21 @@ export default class SynOption extends SynergyElement {
     return label.trim();
   }
 
+  private triggerParentDefaultSlotChange() {
+    customElements.whenDefined('syn-combobox').then(() => {
+      const controller = this.closest('syn-combobox');
+      if (controller) {
+        controller.handleDefaultSlotChange();
+      }
+    });
+    customElements.whenDefined('syn-select').then(() => {
+      const controller = this.closest('syn-select');
+      if (controller) {
+        controller.handleDefaultSlotChange();
+      }
+    });
+  }
+
   render() {
     return html`
       <div

package/metadata/packages/components/components/syn-select/component.ts

@@ -96,11 +96,11 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
   });
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
   private readonly localize = new LocalizeController(this);
-  private isInitialized: boolean = false;
   private typeToSelectString = '';
   private typeToSelectTimeout: number;
   private closeWatcher: CloseWatcher | null;
   private resizeObserver: ResizeObserver;
+  private isUserInput: boolean = false;
 
   @query('.select') popup: SynPopup;
   @query('.select__combobox') combobox: HTMLSlotElement;
@@ -366,6 +366,7 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
       // If it is open, update the value based on the current selection and close it
       if (this.currentOption && !this.currentOption.disabled) {
         this.valueHasChanged = true;
+        this.isUserInput = true;
         if (this.multiple) {
           this.toggleOptionSelection(this.currentOption);
         } else {
@@ -529,6 +530,7 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
 
     if (option && !option.disabled) {
       this.valueHasChanged = true;
+      this.isUserInput = true;
       if (this.multiple) {
         this.toggleOptionSelection(option);
       } else {
@@ -681,6 +683,7 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
 
     // Update validity
     this.updateComplete.then(() => {
+      this.isUserInput = false;
       this.formControlController.updateValidity();
     });
   }
@@ -722,10 +725,6 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
     }
   }
 
-  firstUpdated() {
-    this.isInitialized = true;
-  }
-
   
   protected updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
@@ -742,9 +741,11 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
 protected override willUpdate(changedProperties: PropertyValues) {
     super.willUpdate(changedProperties);
 
-    if(!this.isInitialized && !this.defaultValue && this.value) {
-      // If the value was set initially via property binding instead of attribute, we need to set the defaultValue manually
-      // to be able to reset forms and the dynamic loading of options are working correctly.
+    if(changedProperties.has('value') && !this.defaultValue && this.value  && !this.isUserInput) {
+      // Values set by property binding (e.g. Angular, especially with async bindings such as Observables/BehaviorSubjects)
+      // have led to some malfunctions (e.g. form reset not working, dynamic reloading of options, etc.). To fix this,
+      // the defaultValue must be set via property binding. However, this must NOT happen during user input,
+      // as otherwise user interaction will lead to a new defaultValue.
       this.defaultValue = this.value
       this.valueHasChanged = false;
     }

package/metadata/packages/components/static/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@synergy-design-system/components-v2.56.2](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.56.1...components/2.56.2) (2025-11-03)
+
+
+### Bug Fixes
+
+* 🐛 Async delimiter change for pre-selected value in syn-select not displayed ([#1061](https://github.com/synergy-design-system/synergy-design-system/issues/1061)) ([5f6d361](https://github.com/synergy-design-system/synergy-design-system/commit/5f6d36102b669cc34aa44cded47ef49559e74529))
+
 # [@synergy-design-system/components-v2.56.1](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.56.0...components/2.56.1) (2025-11-03)
 
 

package/package.json

@@ -33,11 +33,11 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.4",
     "typescript": "^5.9.3",
-    "@synergy-design-system/components": "2.56.1",
+    "@synergy-design-system/components": "2.56.2",
     "@synergy-design-system/docs": "0.1.0",
+    "@synergy-design-system/eslint-config-syn": "^0.1.0",
     "@synergy-design-system/styles": "1.8.1",
-    "@synergy-design-system/tokens": "^2.37.0",
-    "@synergy-design-system/eslint-config-syn": "^0.1.0"
+    "@synergy-design-system/tokens": "^2.37.0"
   },
   "exports": {
     ".": {
@@ -122,7 +122,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.17.1",
+  "version": "1.17.2",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",