Text Area: clear / suffix / prefix buttons scroll out of view

[paodb]

Description

If the Text Area has a fixed height and contains a clear button or other suffix/prefix, these buttons can be scrolled out of view when entering a multiline content.

Expected outcome

Clear button or other suffix/prefix should stay visible.

Minimal reproducible example

return html`
      <style>
        vaadin-text-area {
          width: 100%;
          height: 150px;
        }
      </style>

      <vaadin-text-area label="Description" clear-button-visible >
        <vaadin-icon slot="prefix" icon="vaadin:vaadin-h"></vaadin-icon>
      </vaadin-text-area>
    `;

Steps to reproduce

1. Add the snipped above to a page
2. Start entering text with several lines until vertical scroll appears
3. See clear button and sufix icon getting no longer visible while keep entering lines

Environment

Vaadin version(s): 24.4.8

Browsers

No response

[yuriy-fix]

This issue has been added to the backlog priority queue for further investigation.

[sissbruecker]

@paodb We looked into possible solutions, but unfortunately fixing this will likely require a breaking change. So fixing this will take longer, at least until the next minor, or possibly the next major. There is a related issue for allowing users to resize the text area, which would also require a breaking change, so we might want to tackle those together at some point.

As an alternative I can provide two simple workarounds using CSS:

1 - Make the internal textarea scrollable

This changes the internal text area to be scrollable. Note that this moves the scroll bar to the left of the clear button or any suffix component.

vaadin-text-area textarea {
  max-height: 100%;
  overflow: auto;
}

2 - Use position: sticky on prefix and suffix components

This prevents prefix and suffix components scrolling out of the viewport. Note that this also moves the clear button to the top, otherwise the clear button would still scroll until it reaches the top and then stop scrolling there.

vaadin-text-area [slot="prefix"],
vaadin-text-area [slot="suffix"],
vaadin-text-area::part(clear-button) {
  align-self: flex-start;
  position: sticky;
  top: 0;
}

[rolfsmeds]

Hmm, are there any other drawbacks to workaround #2 above than that the clear button is always rendered at the top instead of in the vertical center? Because if not, I'm starting to feel like that might be not only a very innocuous breaking change but possibly actually preferable, especially if prefix/suffix elements are also used. If that's the only drawback, I would be in favor of just shipping that change as-is in the next minor.

[sissbruecker]

Currently, you can change the alignment of prefix, suffix or clear button using align-self with them being part of a flex container. If someone has customized the alignment to be anywhere else than at the top, then the outcome would be this:

Bildschirmaufnahme.2024-09-30.um.10.03.52.mov

If we make this change, then you'd have to change alignment using top instead, for example, for a center alignment you'd have to use something like:

vaadin-text-area [slot="prefix"],
vaadin-text-area [slot="suffix"],
vaadin-text-area::part(clear-button) {
  top: 50%;
  transform: translateY(-50%);
}

Edit: That's only the case when the component is scrollable though, using align-self should still work as before when the component is not scrollable. Still might be unexpected that you'd have to use different properties for alignment depending on whether the component can have a scroll bar or not, and you could easily miss this during development if you never test with sufficiently large content.