Show red wavy line below few words in input field

Issue

I am creating a component using input field in React for typing queries syntax similar to (A=2 and B="Value2").I need to highlight the errors by showing red wavy line below objects which are not correct instead of the entire query.

I used the following approaches till now :-

• Used a div with transparent color text , aligned it below the input field , mapped the errors in the div and shown the wavy line . It worked till a fixed width , but as my input value going beyond the width of input field and is becoming scrollable, it is not working in that case as the div does not scroll alongwith the input value.

• Used contentEditableDiv to modify innerHTML , but it is kind of breaking other things that are required for the component.

The first approach is handy but only if I find any way to scroll the div in synchronization with the input value. After making many efforts , I have searched for it but could not find any suitable answer for this.

If any one can help or suggest some other better approach to achieve this ?

Thanks in advance!

Solution

I would try making the div with transparent color text but wrap the words you should underline in a span with a class wavy and apply this css:

text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;

If you make your transparent div to overlap the input with position absolute or something similar, make it the same width as the input and make it scrollable like with overflow: auto it might work.

EDIT: if there is no absolute need to use input or textarea, you can use div with contentEditable="true" and style it to look similar. Here is stackblitz sample https://stackblitz.com/edit/js-jaz62k?file=index.html

Answered By - Dainius Lukša