Some of the characters entered in the search bar’s textarea are invisible

[Geeyun-JY3]

Describe the issue

Some of the characters entered in the search bar’s textarea are invisible. I don’t know how to generalize this character pattern. See the example below.

I already tried

• [x] I've read and searched the documentation.
• [x] I've searched for similar filed issues in this repository.

Steps to reproduce the behavior

1. Enter certain characters in the search bar’s textarea (reproducible in both the Search tab and the search page at any level). I don’t know how to generalize this character pattern. This is the keyword I found that can reproduce it: ， check:end_colon OR has:dismissed-check. URL: https://hosted.weblate.org/search/weblate/?q=%EF%BC%8C+check%3Aend_colon+OR+has%3Adismissed-check

Expected behavior

All the characters entered in the search bar’s textarea are visible.

Screenshots

https://hosted.weblate.org/search/weblate/?q=%EF%BC%8C+check%3Aend_colon+OR+has%3Adismissed-check:

Exception traceback

How do you run Weblate?

weblate.org service

Weblate versions

Weblate 5.10.1

Weblate deploy checks

Additional context

No response

[Geeyun-JY3]

Another offset bug reproducible in https://hosted.weblate.org/search/weblate/-/zh_Hant/?q=%EF%BC%8C+AND+check%3Aend_colon+OR+has%3Adismissed-check while selecting.

[nijel]

Apparently, the highlighting overlay wraps differently for you than the textarea.

What browser do you use? It seems to work fine for me (Firefox 128).

[meel-hd]

I'll start on fixing the hidden text issue.

Edit: @Geeyun-JY3 I wasn't able to reproduce the issue(on Edge and Brave browsers). What browser this issue appeared on? also the screen width/height if possible.

[Geeyun-JY3]

I tested in Edge 133.0.3065.82 on Windows 11 24H2 26100.3194.

My display resolution is 2520 × 1680. Scale is 175%.

I can only reproduce https://hosted.weblate.org/search/weblate/?q=%EF%BC%8C+check%3Aend_colon+OR+has%3Adismissed-check in Edge when both vertical tabs are turned on and the sidebar is shown, only tested when the Interface Language is English.

I can always reproduce https://hosted.weblate.org/search/weblate/-/zh_Hant/?q=%EF%BC%8C+AND+check%3Aend_colon+OR+has%3Adismissed-check in Edge when either vertical tabs are turned on, or the sidebar is shown, or both, only tested when the Interface Language is Simplified Chinese and English.

[Geeyun-JY3]

Screencast: Toggle the sidebar in https://hosted.weblate.org/search/weblate/-/zh_Hant/?q=%EF%BC%8C+AND+check%3Aend_colon+OR+has%3Adismissed-check when the vertical tabs are turned off: https://github.com/user-attachments/assets/45aa1a2e-7f6a-4377-a235-ba73396e2dbf

[meel-hd]

Looking into it. Appreceiate the details. Edit: @Geeyun-JY3 I small fix would be adjusting the input width so the highlight overlay (visible part) aligns with the selected part (actual text). from here while we look into it!

[meel-hd]

@nijel This is another issue with the alignment of the input text with the highlight output. I've tried matching exact styles of the input and highlight overlay, that fixed this issue, but there still similar issues appear. Also runtime js styles sync didn't fix it. I am thinking if we add a toggle to disable the highlight and show the actual content? Also we can use some battle tested external library like codeMirror

[nijel]

Indeed the search input needs to be replaced by something more clever to handle completion besides highlighting. See also https://github.com/WeblateOrg/weblate/issues/3063. We might also want to use such an editor for flags, see https://github.com/WeblateOrg/weblate/issues/1567.