Timepicker appears below datepicker

[jrock17]

Describe the bug
When using a 2-column layout, the pop-up for the combined datepicker with timepicker doesn't have the correct width to acomodate both inputs. The overlay seems to go outside the bounding box without issue, but the width computation looks off. This causing the timepicker to appear below and not have enough room to float right.

I am using Bulma for CSS if that matters.

Expected behavior
I would expect the menus to appear side-by-side like on the demo website.

Screenshots

Desktop (please complete the following information):

• OS: Mac
• Browser Chrome
• Version 138.0.7204.158

[kunjanoscd]

Try making your input wider, it should fix the issue. Or target the popper div and set the width to something bigger.

[tejas-agravat-dev]

Can you tell me how to reproduce this issue?

Code :
const Example: React.FC = () => {
const [isOpen, setIsOpen] = useState(true);
const [startDate, setStartDate] = useState<Date | null>(new Date());
const [isScrolled, setIsScrolled] = useState(true);

useEffect(() => {
const handleScroll = (): void => setIsScrolled(window.scrollY < 400);
document.addEventListener("scroll", handleScroll);

initializeTsxTransformer();

return () => {
  document.removeEventListener("scroll", handleScroll);
};

}, []);

return (
<DatePicker
open={isOpen && isScrolled}
selected={startDate}
onChange={(date: Date | null) => {
setStartDate(date);
setIsOpen(false);
}}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
onInputClick={() => setIsOpen(true)}
/>
);
};