[WC-3224] Checkbox radio selector fixes

packages/pluggableWidgets/checkbox-radio-selection-web/CHANGELOG.md

@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- Fixed an issue with Association selection happening when reference set contains objects not present in Selectable objects list.
+- Fixed an issue with long labels not displaying correctly.
+
 ## [1.1.0] - 2025-10-18
 
 ### Added

packages/pluggableWidgets/checkbox-radio-selection-web/src/helpers/Association/AssociationMultiSelector.ts

@@ -17,8 +17,28 @@ export class AssociationMultiSelector
     }
 
     setValue(value: string[] | null): void {
-        const newValue = value?.map(v => this.options._optionToValue(v)!);
-        this._attr?.setValue(newValue);
+        if (value && this._attr) {
+            const currentValue = this._attr.value ?? [];
+            const newValue = value
+                ?.map(v => {
+                    const knownObject = this.options._optionToValue(v);
+                    if (knownObject) {
+                        return knownObject;
+                    }
+
+                    // this option is not know, we need to look for it in the current value
+                    const hiddenObject = currentValue.find(o => o.id === v);
+                    if (hiddenObject) {
+                        return hiddenObject;
+                    }
+                    console.info(`Object with ID ${v} not found. This value will be omitted.`);
+
+                    return null;
+                })
+                .filter(v => !!v);
+            this._attr.setValue(newValue);
+        }
+
         super.setValue(value);
     }
 

packages/pluggableWidgets/checkbox-radio-selection-web/src/ui/CheckboxRadioSelection.scss

@@ -2,6 +2,7 @@
 .widget-checkbox-radio-selection {
     display: block;
     position: relative;
+    min-width: 0;
 
     &-readonly {
         &.widget-checkbox-radio-selection-readonly-text {
@@ -25,13 +26,17 @@
     }
 
     &-item {
+        display: flex;
+        align-items: center;
         input {
-            vertical-align: middle;
+            flex: 0 0 16px;
         }
-    }
 
-    label {
-        font-weight: inherit;
+        label {
+            font-weight: inherit;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
     }
 
     input[type="radio"],