Error message is not visible inside of vaadin-grid

[javier-godoy]

Description

[Vaadin 14.4.4] The error message of DatePicker is not visible when the component is used inside of vaadin-grid (but other components such as vaadin-text-field, vaadin-integer-field, etc) are able to display the error message.

Expected outcome

Actual outcome

Steps to reproduce

Grid<Entity> grid = new Grid<>();
grid.addColumn(Entity::getId).setHeader("Double click to edit");
add(grid);
		
IntegerField iField = new IntegerField();
DatePicker dField = new DatePicker();
grid.addColumn(Entity::getAmount).setEditorComponent(iField).setHeader("A positive number");
grid.addColumn(Entity::getDate).setEditorComponent(dField).setHeader("A date in the past");
grid.setItems(new Entity(1), new Entity(2));
		
Binder<Entity> binder = new Binder<>();
binder.forField(dField).withValidator(d->d.compareTo(LocalDate.now())<=0,"Error!").bind(Entity::getDate, Entity::setDate);
binder.forField(iField).withValidator(i->i>0,"Error!").bind(Entity::getAmount, Entity::setAmount);
grid.getEditor().setBinder(binder);
		
grid.addItemDoubleClickListener(ev->{
	grid.getEditor().editItem(ev.getItem());
});

[tomivirkki]

Workaround:

binder.addStatusChangeListener(e -> {
    grid.getElement().executeJs("setTimeout(function() {$0.notifyResize()}, 300);", grid.getElement());
});

The proper fix is to make the text field dispatch an iron-resize event once the size increase animation has finished

[web-padawan]

The proper fix is to make the text field dispatch an iron-resize event once the size increase animation has finished

Should this be a feature supported by all field components intended to be used in Grid editor?

[tomivirkki]

Should this be a feature supported by all field components intended to be used in Grid editor?

Grid editor is just one use-case where this is relevant. Generally, all components whose size changes dynamically should dispatch an iron-resize event to notify a parent component, that might be listening for it. We might want to change the event name to vaadin-resize for the next generation components (or craft a more modern solution with ResizeObserver).