From f5e4c832f900e28bf072ecc411560fad94174678 Mon Sep 17 00:00:00 2001
From: Julian Lamplmair <151610373+jul-lam@users.noreply.github.com>
Date: Wed, 27 Mar 2024 08:18:53 +0100
Subject: [PATCH] fix(core/select): non string values for the "value" prop of
 select-items are not working (#1159)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
---
 .changeset/real-fireants-study.md                    |  5 +++++
 packages/core/component-doc.json                     | 12 +++++++++---
 packages/core/src/components.d.ts                    | 10 ++++++----
 .../core/src/components/select-item/select-item.tsx  |  7 +++++--
 packages/core/src/components/select/select.tsx       |  5 ++++-
 5 files changed, 29 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/real-fireants-study.md

diff --git a/.changeset/real-fireants-study.md b/.changeset/real-fireants-study.md
new file mode 100644
index 00000000000..5c654720e8f
--- /dev/null
+++ b/.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
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
index 0e787b0590d..0e21c18fa6c 100644
--- a/packages/core/component-doc.json
+++ b/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"
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 93c3635b45b..f362d127075 100644
--- a/packages/core/src/components.d.ts
+++ b/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;
     }
diff --git a/packages/core/src/components/select-item/select-item.tsx b/packages/core/src/components/select-item/select-item.tsx
index d6b41a4b3eb..eed81d37d21 100644
--- a/packages/core/src/components/select-item/select-item.tsx
+++ b/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;
 
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
index 9cd0f74b17c..20c386e78bf 100644
--- a/packages/core/src/components/select/select.tsx
+++ b/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);