Disappearing frame in input fields after update to 24.7

Flow
1

Dear all,
Suddenly after upgrading the version from 24.6 to 24.7.3 I have a problem with disappearing borders on all input fields throughout the application. Below I uploaded a screenshot showing exactly the problem. The field that is focused has its border removed, while the other fields continue to have borders. If i click on the password field to enter a password, the border on that field also disappears, but returns to the Username field. I would like to know whether is this the desired behaviour? Can i somehow change this to the previous focus type?

image
image774×674 17 KB

2

Only change that comes into mind is this: feat: optional pointer focus ring for input fields by sissbruecker · Pull Request #8505 · vaadin/web-components · GitHub - did you customize your Border in any way?

3

I disabled all of my custom css and the issue still persists

4

Are you using --vaadin-input-field-border-width or your own css to achieve the border?
Can you share a screenshot of what the focused and unfocused fields look like with all custom css removed?

5

I forgot about the file that where we set the border specifically, heres the code fragment that is responsible for setting the borders - and below is also a screenshot with it removed.

[part="input-field"] {
    box-shadow: inset 0 0 0 1px var(--lumo-contrast-30pct);
    background-color: var(--lumo-base-color);
}

[part="input-field"]:hover {
    box-shadow: inset 0 0 0 1px var(--lumo-contrast-50pct);
}

After I added !important to those properties it started to work again, but I really want to avoid doing that.

image
image829×671 19.1 KB

6

I recommend you update your styles to use the --vaadin-input-field-border-width and --vaadin-input-field-border-color properties, instead of overriding the box-shadow explicitly.

Try this (in a global stylesheet):

vaadin-text-field, 
vaadin-password-field 
/* and any other fields you want affected */ {
  --vaadin-input-field-border-width: 1px;
  --vaadin-input-field-border-color: var(--lumo-contrast-30pct);
}

:is(vaadin-text-field, 
vaadin-password-field):hover {
  --vaadin-input-field-border-color: var(--lumo-contrast-50pct);
}
1 Like
7

Doing this fixed the issue, thank you :slight_smile: