From f740ad8ddd9cb356af17d36262e483501d67ac1d Mon Sep 17 00:00:00 2001
From: qiuxingyu <chaunceyq@qq.com>
Date: Wed, 3 Apr 2024 16:26:03 +0800
Subject: [PATCH] fix(hooks): [use-lockscreen] removing class name at wrong
 time

---
 .../hooks/__tests__/use-lockscreen.test.tsx   | 27 +++++++++++++++++++
 packages/hooks/use-lockscreen/index.ts        |  4 +--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/hooks/__tests__/use-lockscreen.test.tsx b/packages/hooks/__tests__/use-lockscreen.test.tsx
index 1909c5ea272f0..00987d3cc94e5 100644
--- a/packages/hooks/__tests__/use-lockscreen.test.tsx
+++ b/packages/hooks/__tests__/use-lockscreen.test.tsx
@@ -2,6 +2,7 @@ import { computed, defineComponent, nextTick, onMounted, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import { hasClass } from '@element-plus/utils'
+import sleep from '@element-plus/test-utils/sleep'
 
 import { useLockscreen } from '../use-lockscreen'
 import { useNamespace } from '../use-namespace'
@@ -78,4 +79,30 @@ describe('useLockscreen', () => {
 
     wrapper.unmount()
   })
+
+  it('should not remove class name when another trigger is true', async () => {
+    // await the previous test remove class name
+    await sleep(250)
+    const trigger = mount({
+      setup: () => () => <Comp />,
+    })
+    const anotherTrigger = mount({
+      setup: () => () => <Comp />,
+    })
+    await nextTick()
+
+    expect(hasClass(document.body, kls)).toBe(true)
+
+    anotherTrigger.unmount()
+    await nextTick()
+    await sleep(250)
+
+    expect(hasClass(document.body, kls)).toBe(true)
+
+    trigger.unmount()
+    await nextTick()
+
+    await sleep(250)
+    expect(hasClass(document.body, kls)).toBe(false)
+  })
 })
diff --git a/packages/hooks/use-lockscreen/index.ts b/packages/hooks/use-lockscreen/index.ts
index 6389b1c585dae..1650cf96d8715 100644
--- a/packages/hooks/use-lockscreen/index.ts
+++ b/packages/hooks/use-lockscreen/index.ts
@@ -57,7 +57,7 @@ export const useLockscreen = (
   }
   watch(trigger, (val) => {
     if (!val) {
-      cleanup()
+      withoutHiddenClass && cleanup()
       return
     }
 
@@ -78,5 +78,5 @@ export const useLockscreen = (
     }
     addClass(document.body, hiddenCls.value)
   })
-  onScopeDispose(() => cleanup())
+  onScopeDispose(() => withoutHiddenClass && cleanup())
 }