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 5121d688..908e6706 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 @@ -27,29 +27,30 @@ const emit = defineEmits<{ submit: [Recordable]; }>(); -const [Form, { resetForm, validate, getValues }] = useVbenForm( - reactive({ - commonConfig: { - hideLabel: true, - hideRequiredMark: true, - }, - schema: computed(() => [ - { - component: 'VbenInputPassword' as const, - componentProps: { - placeholder: $t('ui.widgets.lockScreen.placeholder'), - }, - fieldName: 'lockScreenPassword', - formFieldProps: { validateOnBlur: false }, - label: $t('authentication.password'), - rules: z - .string() - .min(1, { message: $t('ui.widgets.lockScreen.placeholder') }), +const [Form, { resetForm, validate, getValues, getFieldComponentRef }] = + useVbenForm( + reactive({ + commonConfig: { + hideLabel: true, + hideRequiredMark: true, }, - ]), - showDefaultActions: false, - }), -); + schema: computed(() => [ + { + component: 'VbenInputPassword' as const, + componentProps: { + placeholder: $t('ui.widgets.lockScreen.placeholder'), + }, + fieldName: 'lockScreenPassword', + formFieldProps: { validateOnBlur: false }, + label: $t('authentication.password'), + rules: z + .string() + .min(1, { message: $t('ui.widgets.lockScreen.placeholder') }), + }, + ]), + showDefaultActions: false, + }), + ); const [Modal] = useVbenModal({ onConfirm() { @@ -60,6 +61,13 @@ const [Modal] = useVbenModal({ resetForm(); } }, + onOpened() { + requestAnimationFrame(() => { + getFieldComponentRef('lockScreenPassword') + ?.$el?.querySelector('[name="lockScreenPassword"]') + ?.focus(); + }); + }, }); async function handleSubmit() { 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 6fb7a54a..3f700334 100644 --- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue +++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue @@ -37,7 +37,7 @@ const date = useDateFormat(now, 'YYYY-MM-DD dddd', { locales: locale.value }); const showUnlockForm = ref(false); const { lockScreenPassword } = storeToRefs(accessStore); -const [Form, { form, validate }] = useVbenForm( +const [Form, { form, validate, getFieldComponentRef }] = useVbenForm( reactive({ commonConfig: { hideLabel: true, @@ -75,6 +75,13 @@ async function handleSubmit() { function toggleUnlockForm() { showUnlockForm.value = !showUnlockForm.value; + if (showUnlockForm.value) { + requestAnimationFrame(() => { + getFieldComponentRef('password') + ?.$el?.querySelector('[name="password"]') + ?.focus(); + }); + } } useScrollLock();