[text-field] Broken vaadin-text-area scroll in Material theme

[Edoazzi]

Description

When using Material Theme and vaadin-tex-area has a defined height, writing text and when the scroll is show, the Material bar in the Bottom is scrolled together with the Text.

Browsers Affected

• Chrome
• Firefox
• Android Chrome

[web-padawan]

Problem is in pseudo elements applied to [part="input-field"].

We can try to move them to :host and using a single pseudo element.
If that doesn't help with a solution, then it will require a breaking change.

[yuriy-fix]

Moving pseudo elements to the :host won't work properly as in that case they won't respect the width of the scroller and the height of error-message which is stylable part.
So this one requires breaking change.

[jouni]

I would say the best workaround is to use the internal .vaadin-text-area-container selector and move the pseudo elements there (note that there’s also the ::after element which is used for the focused state).

Something like this (I didn't try this in the browser):

[part="input-field"]::before,
[part="input-field"]::after {
  display: none;
}

.vaadin-text-area-container::before,
.vaadin-text-area-container::after {
  order: 3;
  content: "";
  display: block;
  height: 1px;
  background-color: var(--_material-text-field-input-line-background-color, #000);
  opacity: var(--_material-text-field-input-line-opacity, 0.42);
}

.vaadin-text-area-container::after {
  margin-top: -1px;
  background-color: var(--material-primary-color);
  opacity: 0;
  height: 2px;
  transform: scaleX(0);
  transition: opacity 0.175s;
}

:host([focused]) .vaadin-text-area-container::after,
:host([invalid]) .vaadin-text-area-container::after {
  opacity: 1;
  transform: none;
  transition: transform 0.175s, opacity 0.175s;
}

[part="label"] {
  order: 1;
}

[part="input-field"] {
  order: 2;
}

[part="error-message"] {
  order: 4;
}

[jouni]

Another alternative might be to expose the height of the text area as a custom property on the host, and then a theme could use that to calculate the position of anything it needs.