From dfc0b4db8e42f9382ac1f892f05b18dee42ac505 Mon Sep 17 00:00:00 2001 From: alexp Date: Fri, 14 Nov 2025 17:38:25 +0300 Subject: [PATCH] fix(VueDatePicker): menu not opening when centered prop is enabled When the centered prop is enabled, the datepicker menu does not open after clicking the input. The issue was caused by the shouldRender ref being initialized as false for non-inline modes, preventing the menu from rendering even when isOpen was true. Modified shouldRender initialization to include rootProps.centered condition. Now shouldRender is true when either inline.enabled or rootProps.centered is active. The existing watcher logic remains unchanged and only affects floating (non-centered, non-inline) mode. Added test case to verify menu opens correctly in centered mode. Changes: - VueDatePicker.vue - TestSuite_1.spec.ts Fixes #1195 --- src/VueDatePicker/VueDatePicker.vue | 2 +- src/VueDatePicker/__tests__/TestSuite_1.spec.ts | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/VueDatePicker/VueDatePicker.vue b/src/VueDatePicker/VueDatePicker.vue index 66e3816d..2a71485e 100644 --- a/src/VueDatePicker/VueDatePicker.vue +++ b/src/VueDatePicker/VueDatePicker.vue @@ -117,7 +117,7 @@ const slots = useSlots(); const isOpen = ref(false); - const shouldRender = ref(inline.value.enabled); + const shouldRender = ref(inline.value.enabled || rootProps.centered); const modelValueRef = toRef(rootProps, 'modelValue'); const timezoneRef = toRef(rootProps, 'timezone'); diff --git a/src/VueDatePicker/__tests__/TestSuite_1.spec.ts b/src/VueDatePicker/__tests__/TestSuite_1.spec.ts index d2bc2fa2..8e99f5f8 100644 --- a/src/VueDatePicker/__tests__/TestSuite_1.spec.ts +++ b/src/VueDatePicker/__tests__/TestSuite_1.spec.ts @@ -60,4 +60,11 @@ describe('Test Suite 1', () => { expect(getMonthToggleBtn(dp).text()).toEqual(getMonthToggleText(nextMonth)); }); }); + + describe('centered option', () => { + it('Should open menu when centered is enabled', async () => { + const dp = await openMenu({ centered: true }); + expect(dp.find('.dp__menu').exists()).toBe(true); + }); + }); });