Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Focus/cursor in grid item editor with non-editable columns
Hi,
I use the grid item editor with some non-editable columns:
public class TestUI extends UI {
@Override
protected void init(final VaadinRequest request) {
final Grid grid = new Grid();
grid.setSizeFull();
grid.setEditorEnabled(true);
grid.addColumn("non-editable-1", String.class).setEditable(false);
grid.addColumn("editable-2", String.class);
grid.addColumn("non-editable-3", String.class).setEditable(false);
grid.addColumn("editable-4", String.class);
grid.addRow("non-editable-1", "editable-2", "non-editable-3", "editable-4");
grid.editItem(grid.getContainerDataSource().firstItemId());
setContent(grid);
}
}
In the above example, I perceive the following behaviour concerning the focus/cursor:
- The focus/cursor can be set to a non-editable column. This happens for the first column, when the item editor is opened and for the third column when clicking in the editor cell or when using the tab key.
- In non-editable columns, there is no visual indication, where the focus/cursor is.
- When using Firefox, typing in a non-editable editor cell, opens the browser's search bar.
I use Vaadin 7.6.1.
Is this a bug?
Is there a work-around?
At least for the 2nd behavior described?
Best regards,
Winfried
One bad work around (which solves the above problems 2 and 3) is to use a "setEditorField(new ReadOnlyField())" instead of "setEditable(false)":
public static class ReadOnlyField extends TextField {
public ReadOnlyField() {
super();
setStyleName("read-only-field");
setMaxLength(0);
setNullRepresentation("");
}
@Override
protected void setInternalValue(final @Nullable String newValue) {
// Never show value, to prohibit editing (additionally to setMaxLength(0))
}
}
@Override
protected void init(final VaadinRequest request) {
final Grid grid = new Grid();
grid.setSizeFull();
grid.setEditorEnabled(true);
grid.addColumn("non-editable-1", String.class).setEditorField(new ReadOnlyField());
grid.addColumn("editable-2", String.class);
grid.addColumn("non-editable-3", String.class).setEditorField(new ReadOnlyField());
grid.addColumn("editable-4", String.class);
grid.addRow("non-editable-1", "editable-2", "non-editable-3", "editable-4");
grid.editItem(grid.getContainerDataSource().firstItemId());
setContent(grid);
}
style.scss:
.v-grid-editor .v-grid-editor-cells .read-only-field {
background: $v-background-color;
}
ReadOnlyField sets the max length of the textfield to 0 which prohibits editing, if the textfield does never show the value of the cell. setReadOnly(false) did not work, because the cursor is not shown.