DateTimePicker in GridPro formats date wrong

[skiedrowski]

Description

A DateTimePicker within a GridPro cell

• does not open the date picker when the calendar icon is clicked
  • however
    • clicking the time icon shows the time selection
    • opening the date picker by clicking in the text field works
• displays the selected date in text field with MM/dd/yyyy. I am expecting dd.MM.yyyy (according to Locale.GERMANY) by default (which works with a DateTimePicker outside a GridPro cell)
  • see attachment "dtp inside of gridpro.png"

With regard to these two behaviors, DateTimePicker behaves better when used outside a grid:

• the date picker is opened when clicking on the calendar icon
• the selected date is shown according to the expected locale (see attachment "dtp outside of gridpro.png")

Expected outcome

Behavior of DateTimePicker in GridPro as least as good as with Vaadin 21.

• date picker in GridPro cell opens when calendar icon is clicked
• selected date is shown with correct format (with DateTimePicker in GridPro cell)

Actual outcome

• date picker in GridPro cell does not open when calendar icon is clicked
• selected date is not shown with correct format (with DateTimePicker in GridPro cell)

Live Demo (optional)

Minimal reproducible example

import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
import java.util.List;
import java.util.Locale;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Composite;
import com.vaadin.flow.component.datetimepicker.DateTimePicker;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.gridpro.GridPro;
import com.vaadin.flow.component.gridpro.ItemUpdater;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.data.renderer.LocalDateTimeRenderer;
import com.vaadin.flow.router.Route;

@Route("grid-pro")
public class GridProView extends Composite<Component> {

    @Override
    protected Component initContent() {
        final var grid = new GridPro<Book>();
        grid.addColumn(Book::getTitle).setHeader("Book").setAutoWidth(true).setSortable(true);
        grid.addColumn(book -> book.getPublisher().getName()).setHeader("Publisher").setSortable(true);
        grid.addColumn(Book::getAuthor).setHeader("Author").setSortable(true);

        grid.addEditColumn(
                        Book::getLastSoldDateTime,
                        new LocalDateTimeRenderer<>(Book::getLastSoldDateTime, DateTimeFormatter.ofPattern("dd.MM.yyyy HH:mm:ss", Locale.GERMANY)))
                .custom(
                        new DateTimePicker(),
                        (ItemUpdater<Book, LocalDateTime>) (book, localDateTime) -> {
                            Notification.show("book " + book.getTitle() + " last sold on " + localDateTime);
                            book.setLastSoldDateTime(localDateTime);
                        }
                ).setHeader("last sold");

        updateGrid(grid);

        final var dtp = new DateTimePicker("DateTimePicker outside of GridPro");

        return new VerticalLayout(grid, dtp);
    }

    private void updateGrid(Grid<Book> grid) {
        List<Book> books = BookService.findAll();
        grid.setItems(books);
    }
}

Helper classes (Book) taken from Book "Practical Vaadin" by Alejandro Duarte, chapter 6. They should be self-explanatory.

Steps to reproduce

• run the code above
• double click on a row in the "last sold" column
• click on calendar icon -> no picker appears (problem 1)
• click on text field -> picker appears
• select a date -> wrong formatting in text field (problem 2)

Environment

• vaadin 22.0.1
• macOS 12.0.1, macOS 12.1
• Chrome 96.0.4664.93

Browsers Affected

• [x] Chrome

did not check others

[DiegoCardoso]

Part of the issue has been fixed by https://github.com/vaadin/web-components/pull/3398. Clicking on the calendar icon works when it is inside a GridPro element. Note that this issue was also present on DatePicker.

About the formats date issue, I can confirm it, but I haven't been able to figure out what is causing it yet. Unlike the calendar icon issue, this one only happens with DateTimePicker. The DatePicker for Flow uses custom formatDate/parseDate function that are set up by the connector when the element is created. I could verify that on the moment the element is created on the client side (but before it is attached to the GridPro), the custom functions are correctly added. But, when the user edits the cell (which effectively attaches the DTP to the GridPro), the functions are changed back to their original versions coming from the web component. I couldn't find what is causing this issue yet.

[skiedrowski]

Confirmed: Fix for blur behavior works with Vaadin 23.0.5.

The buggy formatting is still present.