perf: reset value after reopen LockScreenModal (#4269)

* perf: replace deprecated @keypress with @keydown for Enter key handling * perf: reset value after reopen LockScreenModal
vbenjs · Aug 29, 2024 · 88a7a9b · 88a7a9b
1 parent 3b2ed94
commit 88a7a9b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 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
@@ -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
@@ -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" />