From 543e0cf533a6dc848fa359ed5e23e70ecc389979 Mon Sep 17 00:00:00 2001
From: Theeraphat-Sorasetsakul
 <86758473+Theeraphat-Sorasetsakul@users.noreply.github.com>
Date: Wed, 21 Aug 2024 14:35:09 +0700
Subject: [PATCH] fix(tree-select): fix item interface doesn't sync with values
 (#1208)

---
 package-lock.json                          |  9 +++++----
 packages/elements/src/tree-select/index.ts | 23 ++++++++++++++++++++++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 77567c2de..9946b5c9f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6879,12 +6879,13 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.5.tgz",
-      "integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==",
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
+      "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "follow-redirects": "^1.15.4",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
diff --git a/packages/elements/src/tree-select/index.ts b/packages/elements/src/tree-select/index.ts
index 46d46a13e..afac91fe7 100644
--- a/packages/elements/src/tree-select/index.ts
+++ b/packages/elements/src/tree-select/index.ts
@@ -241,6 +241,29 @@ export class TreeSelect extends ComboBox<TreeSelectDataItem> {
     }
   }
 
+  /**
+   * Update composer values.
+   * @param newValues new values
+   * @returns {void}
+   */
+  protected override updateComposerValues(newValues: string[]): void {
+    for (const item of this.treeManager.checkedItems) {
+      this.treeManager.uncheckItem(item);
+    }
+    const selectedItems = this.queryItems((item, composer) => {
+      return newValues.includes(composer.getItemPropertyValue(item, 'value') ?? '');
+    });
+    const sortedSelectedItem = [];
+    for (const item of selectedItems) {
+      const value = this.composer.getItemPropertyValue(item, 'value') ?? '';
+      const index = newValues.indexOf(value);
+      sortedSelectedItem[index] = item;
+    }
+    for (const item of sortedSelectedItem) {
+      this.treeManager.checkItem(item);
+    }
+  }
+
   /**
    * Renderer used to render tree item elements
    */