[BUG] - Datepicker placment is nonsense when I change language

[hasan6034]

HeroUI Version

2.8.5

Describe the bug

Datepicker works properly in Turkish but not in English.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Open datepicker in modal

Expected behavior

Ability to manually adjust placement

Also, I don't know how accurate it is to say this here, but I think the selectionAlignment property in DatePicker Props has been deprecated on the hero ui website.

Screenshots or Videos

VID_20251108_092424.mp4

Operating System Version

Windows 11

Browser

Chrome

[wingkwong]

please share a minimal reproducible environment for us to check.

[hasan6034]

@wingkwong I'm sending you a small demo. By the way, I apologize for the late reply.

``
"use client";

import React, { useState } from "react";
import { Button } from "@heroui/button";
import { Input } from "@heroui/input";
import { Select, SelectItem } from "@heroui/select";
import {
Modal,
ModalBody,
ModalFooter,
ModalHeader,
ModalContent,
} from "@heroui/modal";
import { DatePicker } from "@heroui/date-picker";
import { I18nProvider } from "@react-aria/i18n";
import { parseDate, CalendarDate } from "@internationalized/date";
import { Chip } from "@heroui/chip";
import { useForm, Controller } from "react-hook-form";

interface FormData {
taskTitle: string;
taskDescription: string;
scheduleTitle: string;
scheduleID: number;
pointGroupID: number;
userGroupID: number;
dateBegin: string;
dateEnd: string;
priorityID: number;
}

const priorities = [
{ itemID: 1, itemName: "Düşük" },
{ itemID: 2, itemName: "Orta" },
{ itemID: 3, itemName: "Yüksek" },
];

const pointGroups = [
{ itemID: 1, itemName: "Grup 1" },
{ itemID: 2, itemName: "Grup 2" },
];

const userGroups = [
{ itemID: 1, itemName: "Kullanıcı Grubu 1" },
{ itemID: 2, itemName: "Kullanıcı Grubu 2" },
];

export default function BugDemoPage() {
const [isOpen, setIsOpen] = useState(false);
const [locale, setLocale] = useState<"tr-TR" | "en-US">("tr-TR");

const { control, handleSubmit, watch, formState: { errors } } = useForm<FormData>({
    defaultValues: {
        taskTitle: "",
        taskDescription: "",
        scheduleTitle: "",
        scheduleID: -1,
        pointGroupID: 0,
        userGroupID: 0,
        dateBegin: "",
        dateEnd: "",
        priorityID: 0,
    },
});

const formData = watch();

const onSubmit = (data: FormData) => {
    console.log("Form Data:", data);
    alert("Form gönderildi! Console'a bakın.");
};

return (
    <I18nProvider locale={locale}>
        <div className="container mx-auto p-8">
            <h1 className="text-3xl font-bold mb-4">Bug Demo - DatePicker Popover Position</h1>
            <div className="mb-6 p-4 bg-yellow-100 dark:bg-yellow-900/30 rounded-lg">
                <h2 className="font-bold mb-2">🐛 Bug Description:</h2>
                <ul className="list-disc list-inside space-y-1 text-sm">
                    <li><strong>Turkish (tr-TR):</strong> When the DatePicker opens and you select a month/year, the popover position stays stable ✅</li>
                    <li><strong>English (en-US):</strong> When the DatePicker opens, the popover initially appears at the top, but after selecting a month/year, it suddenly shifts downward ❌</li>
                </ul>
                <p className="mt-2 text-sm font-medium">
                    For testing: Open the modal, change the language, and open the calendar in the “Start Date” or “End Date” fields, then click on month/year selection.
                </p>
            </div>

            <div className="flex gap-4 mb-4">
                <Button
                    color="secondary"
                    onPress={() => setIsOpen(true)}
                >
                    Open Modal
                </Button>

                <div className="flex gap-2 items-center">
                    <span className="text-sm font-medium">Language:</span>
                    <Button
                        size="sm"
                        color={locale === "tr-TR" ? "secondary" : "default"}
                        variant={locale === "tr-TR" ? "solid" : "bordered"}
                        onPress={() => setLocale("tr-TR")}
                    >
                        🇹🇷 Turkish
                    </Button>
                    <Button
                        size="sm"
                        color={locale === "en-US" ? "secondary" : "default"}
                        variant={locale === "en-US" ? "solid" : "bordered"}
                        onPress={() => setLocale("en-US")}
                    >
                        🇺🇸 English
                    </Button>
                </div>
            </div>

            <div className="text-sm text-gray-600 dark:text-gray-400">
                Active Language: <strong>{locale}</strong>
            </div>

        </div>

        <Modal
            isOpen={isOpen}
            placement="center"
            scrollBehavior="inside"
            size="3xl"
            onOpenChange={() => setIsOpen(false)}
        >
            <ModalContent>
                {(onClose) => (
                    <>
                        <ModalHeader className="flex flex-col gap-1">
                            <div>Görev Ekle/Düzenle (Minimal Bug Demo)</div>
                            <div className="text-sm font-normal text-default-500">
                                Locale: {locale} - DatePicker'da ay/yıl seçimi açın ve popover pozisyonunu gözlemleyin
                            </div>
                        </ModalHeader>
                        <ModalBody>
                            <div className="flex flex-col gap-4 min-h-[400px]">
                                {/* Görev Başlığı */}
                                <Controller
                                    control={control}
                                    name="taskTitle"
                                    render={({ field }) => (
                                        <Input
                                            {...field}
                                            label="Görev Başlığı"
                                            placeholder="Görev başlığını girin"
                                            variant="bordered"
                                        />
                                    )}
                                />

                                {/* Görev Açıklaması */}
                                <Controller
                                    control={control}
                                    name="taskDescription"
                                    render={({ field }) => (
                                        <Input
                                            {...field}
                                            label="Görev Açıklaması"
                                            placeholder="Açıklama girin"
                                            variant="bordered"
                                        />
                                    )}
                                />

                                {/* Zamanlama - Read-only input ile buton */}
                                <div className="flex items-start gap-2">
                                    <Controller
                                        control={control}
                                        name="scheduleTitle"
                                        render={({ field }) => (
                                            <Input
                                                {...field}
                                                isReadOnly
                                                isRequired
                                                className="flex-1"
                                                label="Zamanlama"
                                                placeholder="Zamanlama seçin"
                                                variant="bordered"
                                            />
                                        )}
                                    />
                                    <Button
                                        className="h-14"
                                        color="secondary"
                                        variant="flat"
                                        onPress={() => alert("Zamanlama modal'ı açılacak")}
                                    >
                                        📅
                                    </Button>
                                </div>

                                <div className="flex flex-col md:flex-row gap-4">
                                    {/* Nokta Grubu */}
                                    <Controller
                                        control={control}
                                        name="pointGroupID"
                                        render={({ field: { onChange, value, ...field } }) => (
                                            <Select
                                                {...field}
                                                isRequired
                                                label="Nokta Grubu"
                                                placeholder="Nokta grubu seçin"
                                                selectedKeys={value ? [value.toString()] : []}
                                                variant="bordered"
                                                onChange={(e) => onChange(Number(e.target.value))}
                                            >
                                                {pointGroups.map((group) => (
                                                    <SelectItem key={group.itemID.toString()}>
                                                        {group.itemName}
                                                    </SelectItem>
                                                ))}
                                            </Select>
                                        )}
                                    />

                                    {/* Kullanıcı Grubu */}
                                    <Controller
                                        control={control}
                                        name="userGroupID"
                                        render={({ field: { onChange, value, ...field } }) => (
                                            <Select
                                                {...field}
                                                isRequired
                                                label="Kullanıcı Grubu"
                                                placeholder="Kullanıcı grubu seçin"
                                                selectedKeys={value ? [value.toString()] : []}
                                                variant="bordered"
                                                onChange={(e) => onChange(Number(e.target.value))}
                                            >
                                                {userGroups.map((group) => (
                                                    <SelectItem key={group.itemID.toString()}>
                                                        {group.itemName}
                                                    </SelectItem>
                                                ))}
                                            </Select>
                                        )}
                                    />
                                </div>

                                {/* Tarih Alanları */}
                                <div className="grid grid-cols-2 gap-4">
                                    {/* Başlangıç Tarihi */}
                                    <Controller
                                        control={control}
                                        name="dateBegin"
                                        render={({ field: { onChange, value, ...field } }) => (
                                            <DatePicker
                                                {...field}
                                                isRequired
                                                showMonthAndYearPickers
                                                label="Başlangıç Tarihi"
                                                maxValue={new CalendarDate(2099, 12, 31)}
                                                minValue={new CalendarDate(1900, 1, 1)}
                                                classNames={{
                                                    popoverContent: "z-50",
                                                }}
                                                value={
                                                    value && value.trim() !== ""
                                                        ? parseDate(value)
                                                        : null
                                                }
                                                variant="bordered"
                                                onChange={(date) => {
                                                    const dateStr = date ? date.toString() : "";
                                                    onChange(dateStr);
                                                }}
                                            />
                                        )}
                                    />

                                    {/* Bitiş Tarihi */}
                                    <Controller
                                        control={control}
                                        name="dateEnd"
                                        render={({ field: { onChange, value, ...field } }) => (
                                            <DatePicker
                                                {...field}
                                                showMonthAndYearPickers
                                                label="Bitiş Tarihi"
                                                maxValue={new CalendarDate(2099, 12, 31)}
                                                minValue={new CalendarDate(1900, 1, 1)}
                                                value={
                                                    value && value.trim() !== ""
                                                        ? parseDate(value)
                                                        : null
                                                }
                                                variant="bordered"
                                                onChange={(date) => {
                                                    const dateStr = date ? date.toString() : "";
                                                    onChange(dateStr);
                                                }}
                                            />
                                        )}
                                    />
                                </div>

                                {/* Öncelik */}
                                <Controller
                                    control={control}
                                    name="priorityID"
                                    render={({ field: { onChange, value } }) => (
                                        <div className="flex flex-col gap-2">
                                            <label className="text-sm font-medium text-foreground-600">
                                                Öncelik <span className="text-danger">*</span>
                                            </label>
                                            <div className="flex gap-2 flex-wrap">
                                                {priorities.map((priority) => (
                                                    <Chip
                                                        key={priority.itemID.toString()}
                                                        className="cursor-pointer"
                                                        color={
                                                            value === priority.itemID
                                                                ? "secondary"
                                                                : "default"
                                                        }
                                                        variant="solid"
                                                        onClick={() => onChange(priority.itemID)}
                                                    >
                                                        {priority.itemName}
                                                    </Chip>
                                                ))}
                                            </div>
                                        </div>
                                    )}
                                />
                            </div>
                        </ModalBody>
                        <ModalFooter>
                            <Button
                                color="default"
                                variant="light"
                                onPress={onClose}
                            >
                                İptal
                            </Button>
                            <Button
                                color="secondary"
                                onPress={() => handleSubmit(onSubmit)()}
                            >
                                Kaydet
                            </Button>
                        </ModalFooter>
                    </>
                )}
            </ModalContent>
        </Modal>
    </I18nProvider>
);

}
``

[wingkwong]

I need a minimal reproducible environment (e.g. a sandbox) so that I could check the setup, dependencies, your logic etc.