From 88a7a9b1ee45901fe61c2fab70c95b50452a1cc5 Mon Sep 17 00:00:00 2001
From: handsomeFu <fzq980219@gmail.com>
Date: Thu, 29 Aug 2024 17:21:08 +0800
Subject: [PATCH] perf: reset value after reopen LockScreenModal (#4269)

* perf: replace deprecated @keypress with @keydown for Enter key handling

* perf: reset value after reopen LockScreenModal
---
 .../widgets/lock-screen/lock-screen-modal.vue | 19 +++++++++++++------
 .../src/widgets/lock-screen/lock-screen.vue   |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue b/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
index d5bfc927534..96086d826c2 100644
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
@@ -34,15 +34,22 @@ const emit = defineEmits<{
   submit: RegisterEmits['submit'];
 }>();
 
+const formState = reactive({
+  lockScreenPassword: '',
+  submitted: false,
+});
+
 const [Modal] = useVbenModal({
   onConfirm() {
     handleSubmit();
   },
-});
-
-const formState = reactive({
-  lockScreenPassword: '',
-  submitted: false,
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      // reset value reopen
+      formState.submitted = false;
+      formState.lockScreenPassword = '';
+    }
+  },
 });
 
 const passwordStatus = computed(() => {
@@ -70,7 +77,7 @@ function handleSubmit() {
   >
     <div
       class="mb-10 flex w-full flex-col items-center px-10"
-      @keypress.enter.prevent="handleSubmit"
+      @keydown.enter.prevent="handleSubmit"
     >
       <div class="w-full">
         <div class="ml-2 flex w-full flex-col items-center">
diff --git a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
index e08aa625402..b1e7a69b14d 100644
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
@@ -120,7 +120,7 @@ function toggleUnlockForm() {
       <div
         v-if="showUnlockForm"
         class="flex-center size-full"
-        @keypress.enter.prevent="handleSubmit"
+        @keydown.enter.prevent="handleSubmit"
       >
         <div class="flex-col-center mb-10 w-[300px]">
           <VbenAvatar :src="avatar" class="enter-x mb-6 size-20" />