Looks like the keyboard driven focus-ring is on the outside of fields, and gets clipped when the field is placed in a grid cell (where we probably have removed most padding and spacing)
This isn’t a problem normally, since you can se that the field without a border is the focused field.
It is a problem when the field is invalid though, and you can’t see it:
Here, if I tab to the field:
And here if I clicked in the field instead:
How can I fix this?
This is with Lumo and Vaadin 25.1
This is a known and very old issue with custom editors in GridPro, caused by the way focus rings are rendered outside of the field surface, and the field surface filling all the space in the cell. The build-in editors do not have this issue. The workaround is to customize the focus ring to be inside the field.
This is not GridPro; It is a regular Grid, although I’ve recently switched to SelectionGrid.
The fields I focused on (heh) were “custom” fields, but only AbstractCompositeField around a TextField, so they’re regular vaadin-text-field in the browser.
Interestingly, if I look at a plain vaadin-text-field, the focus-ring is less clipped:
As far as I can see, the custom fields are plain vaadin-text-field, only with a button in the suffix.
If I change my code and don’t set the suffix, then the focus-ring is rendered in the same way as for the plain text field above.
It does not help to just set the button to hidden in the browser DevTools.
So… Seems like Vaadin has some styling to move the focus ring inside when in a grid, and that it fails when the field has a suffix?
Have you customized the grid cell padding?
It helps to talk about it; When I looked, I found this! :
vaadin-grid, vaadin-selection-grid {
...
vaadin-grid-cell-content:has(vaadin-button) {
padding: 0;
}
That is probably meant for when we render standalone Buttons in a cell, but it also affected my TextFields with a Button in their suffix!
Commenting out that my custom field looks like regular fields:
Still clipped on the left side, but now it is consistent at least :)