From a5a9a6c5db4e991497359210970cb9f4bcbd63f6 Mon Sep 17 00:00:00 2001
From: inottn <inottn@outlook.com>
Date: Sat, 3 Feb 2024 12:54:58 +0800
Subject: [PATCH] fix(DropdownMenu): fix recursive update when passing object
 literal to title-class (#12614)

---
 .../vant/src/dropdown-menu/DropdownMenu.tsx   | 12 ++++++---
 .../src/dropdown-menu/test/index.spec.tsx     | 25 +++++++++++++++++++
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/packages/vant/src/dropdown-menu/DropdownMenu.tsx b/packages/vant/src/dropdown-menu/DropdownMenu.tsx
index c38e38162..bd1be0364 100644
--- a/packages/vant/src/dropdown-menu/DropdownMenu.tsx
+++ b/packages/vant/src/dropdown-menu/DropdownMenu.tsx
@@ -2,6 +2,7 @@ import {
   ref,
   computed,
   defineComponent,
+  toRaw,
   type InjectionKey,
   type CSSProperties,
   type ExtractPropTypes,
@@ -17,7 +18,6 @@ import {
   makeNumericProp,
   createNamespace,
   HAPTICS_FEEDBACK,
-  type ComponentInstance,
 } from '../utils';
 
 // Composables
@@ -33,6 +33,7 @@ import {
 
 // Types
 import type { DropdownMenuProvide, DropdownMenuDirection } from './types';
+import type { DropdownItemInstance } from '../dropdown-item';
 
 const [name, bem] = createNamespace('dropdown-menu');
 
@@ -63,7 +64,10 @@ export default defineComponent({
     const barRef = ref<HTMLElement>();
     const offset = ref(0);
 
-    const { children, linkChildren } = useChildren(DROPDOWN_KEY);
+    const { children, linkChildren } = useChildren<
+      DropdownItemInstance,
+      unknown
+    >(DROPDOWN_KEY);
     const scrollParent = useScrollParent(root);
 
     const opened = computed(() =>
@@ -121,9 +125,9 @@ export default defineComponent({
       });
     };
 
-    const renderTitle = (item: ComponentInstance, index: number) => {
+    const renderTitle = (item: DropdownItemInstance, index: number) => {
       const { showPopup } = item.state;
-      const { disabled, titleClass } = item;
+      const { disabled, titleClass } = toRaw(item.$props);
 
       return (
         <div
diff --git a/packages/vant/src/dropdown-menu/test/index.spec.tsx b/packages/vant/src/dropdown-menu/test/index.spec.tsx
index db365a940..7b07e7a9e 100644
--- a/packages/vant/src/dropdown-menu/test/index.spec.tsx
+++ b/packages/vant/src/dropdown-menu/test/index.spec.tsx
@@ -367,3 +367,28 @@ test('auto-locate prop', async () => {
 
   vi.doUnmock('../../utils/dom');
 });
+
+test('title-class prop', async () => {
+  const titleClass = ref({ custom: true });
+  const wrapper = mount({
+    setup() {
+      return () => (
+        <DropdownMenu>
+          <DropdownItem titleClass={{ custom: true }} />
+          <DropdownItem titleClass={titleClass.value} />
+        </DropdownMenu>
+      );
+    },
+  });
+
+  await later();
+
+  const titles = wrapper.findAll('.van-dropdown-menu__title');
+  // using object literal should work
+  expect(titles[0].classes()).toContain('custom');
+  expect(titles[1].classes()).toContain('custom');
+
+  titleClass.value.custom = false;
+  await later();
+  expect(titles[1].classes()).not.toContain('custom');
+});