Can't style TextArea border in readonly mode

[SlimeAttack07]

Description of the bug

If I try to style a TextArea's border in readonly mode, I can't get the changes to show up. I presume this is because TextArea's readonly border styling happens in the shadow DOM:

The documentation (https://vaadin.com/docs/latest/components/text-area/styling) has a few possible selectors that don't work:

• --vaadin-input-field-readonly-border property is shared by all input fields except TextArea.
• vaadin-text-area[readonly] selector selects the regular css, but the border is applied in shadow DOM and hence this selector doesn't affect the border. In fact, setting a solid border here displays around the dashed readonly border, showing they're not selecting the same element.

Expected behavior

The border shouldn't be hardcoded in TextArea's shadow DOM. Instead, it should use the --vaadin-input-field-readonly-border property for that just like the other input fields do. In fact, manually setting the border to that in a browser's inspector and then setting the property to 'none' properly makes the border disappear.

Minimal reproducible example

1. Make a TextField and set it to readonly mode ( myTextField.setReadOnly(true); ).
2. Make a TextArea and set it to readonly mode ( myTextArea.setReadOnly(true); ).
3. In your css's html tag, set --vaadin-input-field-readonly-border to none:
   html {
   --vaadin-input-field-readonly-border: none;
   }
4. Observe that while the TextField's readonly border has vanished, the TextArea's readonly border remains.

Versions

• Vaadin / Flow version: 24.3.12
• Java version: 21
• OS version: Windows 11

[rolfsmeds]

Good catch, apparently we forgot to refactor TextArea to use the --vaadin-input-field-readonly-border when it was introduced, so that needs to be fixed.

In the meantime, however, it is not a problem that the border is defined in shadow DOM css, as there is a part name selectors that allows you to target the appropriate element:

vaadin-text-area[readonly]::part(input-field) {
  border: 1px solid black;
}

[SlimeAttack07]

Thanks! I'd tried out a few of the selectors from the documentation that didn't do what I needed. I didn't think about vaadin-text-area[readonly]::part(input-field) so I hadn't tried that yet.
Just tried it out and that does indeed do what I need, so I'll use that for now.