vaadin
[date-picker] Month duplication caused by font size
Description
I have a DatePicker and when I scroll down in it the same month appears twice within the same year. The duplicated month is the 3rd and 4th after the initial. The error occures, when the --lumo-font-size-xs CSS property is set to 0.982rem or smaller (0.983rem works fine).
Expected outcome
Every month appears once within the same year.
Actual outcome
The 3rd and 4th month after the initial is the same (duplicated) within the same year. See example video below.
Example
CSS:
html {
--lumo-font-size-xs: 0.975rem !important;
}
Java code:
import com.vaadin.flow.component.datepicker.DatePicker;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
@Route("")
@CssImport("./styles/shared-styles.css")
public class MainView extends VerticalLayout {
public MainView() {
add(new DatePicker());
}
}
Vaadin version
Both 14.1.4 and 14.1.27.
Browsers Affected
- [X] Chrome
- [X] Firefox
Very weird, but I can confirm. It can be reproduced at https://cdn.vaadin.com/vaadin-date-picker/4.1.1/demo/#date-picker-basic-demos by setting that style on the <html> element (before opening the date picker for the first time).
e.g.
document.documentElement.style.setProperty('--lumo-font-size-xs', '0.975rem');
I also noticed that both August and October are duplicated (on this year when testing now), but if you scroll down past them and then when you scroll back up there is only one of them. And again if you scroll up past them a few months and then back down, then they are again duplicated.
If you select a value in those months and then open the picker again, then they don't seem duplicated.
I can confirm that month duplication is still present in version 14.4.10. It can be easy reproduced just by opening: https://vaadin.com/components/vaadin-date-picker/java-examples in your browser and changing font-size to 15px in html tag (using developer tools). After setting font size, you need to click to open some other component, and then go back to date picker (this will refresh date picker page, but with changed font size)
Or, by setting font size in application code: html { font-size: 15px; }
Font size of 16px works ok, but font size 15px duplicates "January".
I've noticed that month duplication is still present in version 23. On https://vaadin.com/components/vaadin-date-picker/java-examples page I got "May" and "July" duplicated by setting font size to 15px.
I've noticed the same issue with Jan 2024 being displayed twice. (Vaadin 22)
