Scroller does not honor focus-ring

[knoobie]

Description

Placing a field inside a scroller results in non-visible / cut focus-ring.

Expected outcome

focus-ring is not cut.

Minimal reproducible example

html { --lumo-input-field-pointer-focus-visible: 1; }

var field = new TextField("Textfield with border");
field.focus();
var scroller = new Scroller(field);
scroller.getStyle().setMaxWidth("fit-content"); // used to show the "cut" on both sides
add(scroller);

Steps to reproduce

1. Execute Code.

Environment

Vaadin version(s): 24.9.x OS: MacOS / FF

[web-padawan]

Similar issue for vaadin-board: https://github.com/vaadin/web-components/issues/494

[yuriy-fix]

The issue comes from the fact that the scroller doesn't have default padding, and the field has a box-shadow outline used within a directional overflow container at the same time. This cannot be worked around unless we provide default padding, which is probably not the best idea for the scroller component.

[yuriy-fix]

We could consider enhancing the documentation to mention it.

[jouni]

Can be partially fixed by applying overflow:auto only when the content actually overflows the container.

[jouni]

For the record: we can't fix for all cases. A scroll container will always have overflow: auto|scroll which will clip painting outside its content block. The only "fix" is to add padding within the scroll container, the size of the focus outline at minimum.