fix(VTreeview): activated emits twice on leafs (#20739)

vuetifyjs · Nov 29, 2024 · 0fb92ed · 0fb92ed
1 parent aa4c7bb
commit 0fb92ed
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
@@ -47,13 +47,8 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
       (props.link || link.isClickable.value || (props.value != null && !!vListItemRef.value?.list) || isActivatableGroupActivator.value)
     )
 
-    function activateItem (e: MouseEvent | KeyboardEvent) {
-      if (
-        !isClickable.value ||
-        (!isActivatableGroupActivator.value && vListItemRef.value?.isGroupActivator)
-      ) return
-
-      if (vListItemRef.value?.root.activatable.value) {
+    function activateGroupActivator (e: MouseEvent | KeyboardEvent) {
+      if (isClickable.value && isActivatableGroupActivator.value) {
         vListItemRef.value?.activate(!vListItemRef.value?.isActivated, e)
       }
     }
@@ -78,7 +73,7 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
             props.class,
           ]}
           ripple={ false }
-          onClick={ props.onClick ?? activateItem }
+          onClick={ props.onClick ?? activateGroupActivator }
         >
           {{
             ...slots,

diff --git a/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx b/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx
@@ -156,6 +156,27 @@ describe.each([
       await userEvent.click(screen.getByText(/Nekosaur/))
       expect(activated.value).toStrictEqual([203])
     })
+
+    // https://github.com/vuetifyjs/vuetify/issues/20665
+    it('should emit only once', async () => {
+      const onActivated = vi.fn()
+      render(() => (
+        <VTreeview
+          open-all
+          items={ items }
+          item-value="id"
+          activatable
+          active-strategy="independent"
+          onUpdate:activated={ onActivated }
+        />
+      ))
+
+      await userEvent.click(screen.getByText(/John/))
+      expect(onActivated).toHaveBeenCalledOnce()
+
+      await userEvent.click(screen.getByText(/Human Resources/))
+      expect(onActivated).toHaveBeenCalledTimes(2)
+    })
   })
 
   describe('select', () => {