From deb6d7604a697ccc852948f83c9217d65c24f765 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BA=A2?= <wxh16144@qq.com>
Date: Wed, 28 Aug 2024 13:57:19 +0800
Subject: [PATCH] fix: improve to not treat as a valid option when the value is
 null. (#564)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: ​ <​>
---
 src/TreeSelect.tsx            |  2 +-
 tests/Select.multiple.spec.js | 38 +++++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/TreeSelect.tsx b/src/TreeSelect.tsx
index 88778dc9..0843e358 100644
--- a/src/TreeSelect.tsx
+++ b/src/TreeSelect.tsx
@@ -390,7 +390,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
 
   // =========================== Values ===========================
   const rawMixedLabeledValues = React.useMemo(
-    () => toLabeledValues(internalValue),
+    () => toLabeledValues(internalValue === null ? [] : internalValue),
     [toLabeledValues, internalValue],
   );
 
diff --git a/tests/Select.multiple.spec.js b/tests/Select.multiple.spec.js
index 20a75c45..eba8a620 100644
--- a/tests/Select.multiple.spec.js
+++ b/tests/Select.multiple.spec.js
@@ -310,4 +310,42 @@ describe('TreeSelect.multiple', () => {
     ).map(ele => ele.textContent);
     expect(values).toEqual(['child1', 'child2', 'parent']);
   });
+
+  // https://github.com/ant-design/ant-design/issues/50578#issuecomment-2312130715
+  it('should not omit value when value is null', () => {
+    const { container } = render(
+      <TreeSelect
+        value={null}
+        multiple
+        placeholder="Fake placeholder"
+        treeData={[
+          {
+            label: 'parent',
+            value: 'parent',
+            children: [
+              {
+                label: 'child1',
+                value: 'child1',
+              },
+              {
+                label: 'child2',
+                value: 'child2',
+              },
+            ],
+          },
+        ]}
+      />,
+    );
+
+    const values = Array.from(
+      container.querySelectorAll('.rc-tree-select-selection-item-content'),
+    ); //.map(ele => ele.textContent);
+
+    expect(values).toHaveLength(0);
+
+    const placeholder = container.querySelector('[class$=placeholder]');
+    expect(placeholder).toBeTruthy();
+    expect(placeholder.textContent).toBe('Fake placeholder');
+  });
+
 });