pekam
commented
3 years ago It seems that the field highlight is not visible because RichTextEditor has the CSS property overflow: hidden by default. The field highlight element is injected into the shadow root of the host component, so the overflowing outline gets cropped.
A simple workaround would thus be to override the CSS property in a stylesheet or with Java:
editor.getStyle().set("overflow", "visible");I'm not sure if this has any unwanted consequences, or if we could just remove the property from the web component implementation to fix the issue. It seems to be originally added with a feature to enable auto-growing the component while entering new lines of text: https://github.com/vaadin/vaadin-rich-text-editor/pull/88
I did some testing, but couldn't figure out how removing overflow: auto from the component would break the auto-grow feature (or anything else).
It seems that overflow: hidden was also added to the content part in the shadow root of <vaadin-rich-text-editor>. If I remove also that one, and set max-height for the component, then the auto-grow feature breaks as shown in the screenshot:
WDYT, @web-padawan, @yuriy-fix? Could it be that the overflow: hidden is redundant on the host, or am I missing something?
Using the official richt-text editor add-on, the field highlighting is not working properly. Highlight is there (look at the top rounded corners in the screenshots below, but seems to be in the background and thus barely visible).
Tested with Vaadin 19.0.5 and starter from start.vaadin.com