fix(core/select): non string values for the "value" prop of select-it…

…ems are not working (#1159)

Co-authored-by: Lukas Maurer <[email protected]>

.changeset/real-fireants-study.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core/select): non string values for the "value" prop of select-items are not working

packages/core/component-doc.json

@@ -13156,7 +13156,7 @@
           "mutable": false,
           "attr": "selected",
           "reflectToAttr": false,
-          "docs": "Whether the item is selected.",
+          "docs": "Flag indicating whether the item is selected",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -13178,8 +13178,14 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": true,
-          "docs": "Item value",
-          "docsTags": [],
+          "docs": "The value of the item.\nImportant: The select component uses string values to handle selection and will call toString() on this value.\nTherefor a string should be passed to value to prevent unexpected behavior.",
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "will be changed to type string with next major release (3.0.0)"
+            }
+          ],
+          "deprecation": "will be changed to type string with next major release (3.0.0)",
           "values": [
             {
               "type": "any"

packages/core/src/components.d.ts

@@ -1875,11 +1875,12 @@ export namespace Components {
          */
         "onItemClick": (event?: CustomEvent<HTMLIxDropdownItemElement>) => Promise<void>;
         /**
-          * Whether the item is selected.
+          * Flag indicating whether the item is selected
          */
         "selected": boolean;
         /**
-          * Item value
+          * The value of the item. Important: The select component uses string values to handle selection and will call toString() on this value. Therefor a string should be passed to value to prevent unexpected behavior.
+          * @deprecated will be changed to type string with next major release (3.0.0)
          */
         "value": any;
     }
@@ -6014,11 +6015,12 @@ declare namespace LocalJSX {
          */
         "onItemClick"?: (event: IxSelectItemCustomEvent<string>) => void;
         /**
-          * Whether the item is selected.
+          * Flag indicating whether the item is selected
          */
         "selected"?: boolean;
         /**
-          * Item value
+          * The value of the item. Important: The select component uses string values to handle selection and will call toString() on this value. Therefor a string should be passed to value to prevent unexpected behavior.
+          * @deprecated will be changed to type string with next major release (3.0.0)
          */
         "value": any;
     }

packages/core/src/components/select-item/select-item.tsx

@@ -34,12 +34,15 @@ export class SelectItem {
   @Prop({ reflect: true }) label: string;
 
   /**
-   * Item value
+   * The value of the item.
+   * Important: The select component uses string values to handle selection and will call toString() on this value.
+   * Therefor a string should be passed to value to prevent unexpected behavior.
+   * @deprecated will be changed to type string with next major release (3.0.0)
    */
   @Prop({ reflect: true }) value!: any;
 
   /**
-   * Whether the item is selected.
+   * Flag indicating whether the item is selected
    */
   @Prop() selected = false;
 

packages/core/src/components/select/select.tsx

@@ -237,7 +237,10 @@ export class Select {
     }
 
     this.items.forEach((item) => {
-      item.selected = ids.some((i) => i === item.value);
+      item.selected = ids.some(
+        // Check can be removed if value is type of string in future releases
+        (i) => i === (item.value ? item.value.toString() : '')
+      );
     });
 
     this.selectedLabels = this.selectedItems.map((item) => item.label);