Browse Source

perf: reset value after reopen LockScreenModal (#4269)

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

* perf: reset value after reopen LockScreenModal
handsomeFu 7 months ago
parent
commit
88a7a9b1ee

+ 13 - 6
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">

+ 1 - 1
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" />