DatePicker-Overlay opens very slow with large DOM [2 days] #8167
Description
Description
When using the DatePicker on a Page with large and complex DOM, the overlay gets really slow. It opens and then takes multiple seconds to display most of its content.
Bildschirmaufnahme.2025-10-09.172544.mp4
Expected outcome
The DatePicker Overlay opens without any delay regardless of DOM size.
Minimal reproducible example
Example was tested within base-starter-gradle-24:
public MainView() {
for (int k = 0; k < 10; k++) {
for (int j = 0; j < 50; j++) {
DatePicker datePicker = new DatePicker();
Component last = null;
for (int i = 0; i < 100; i++) {
Component current;
if (i % 2 == 0) {
current = new HorizontalLayout();
current.getElement().getStyle().set("height", "95%");
current.getElement().getStyle().set("width", "95%");
} else {
current = new VerticalLayout();
current.getElement().getStyle().set("flex-grow", "1");
}
current.getElement().getStyle().set("border", "1px solid black");
if (last instanceof HasComponents hasComponents) {
hasComponents.add(current);
} else {
add(current);
}
last = current;
}
((HasComponents) last).add(datePicker);
}
}
}
Steps to reproduce
Start the example (Or any other Project with large, complex DOM)
Click any DatePicker to open the Overlay.
Environment
Vaadin version(s): 24.9.1
OS: Windows 11
Browsers
Chrome