-
Notifications
You must be signed in to change notification settings - Fork 382
Incorrect (insufficient) UI size calculation of <input> HTML element in AutocompleteInput.svelte #2250
Description
The Problem
For the following code in git HEAD:
fava/frontend/src/sidebar/FilterForm.svelte
Lines 107 to 119 in dc3ffb9
Looks like its size is computed based on text size, after applying translation:
fava/frontend/src/AutocompleteInput.svelte
Lines 75 to 77 in dc3ffb9
...which works great in the default scenario:
Image-> % python3 Python 3.13.12 (main, Feb 4 2026, 15:06:39) [GCC 15.2.0] on linux Type "help", "copyright", "credits" or "license" for more information. >>> len('Filter by tag, payee, ...')+1 26
...but fails to handle CJK characters with wide characters:
Image-> % python3 Python 3.13.12 (main, Feb 4 2026, 15:06:39) [GCC 15.2.0] on linux Type "help", "copyright", "credits" or "license" for more information. >>> len('筛选(标签,收款人等等)')+1 13
This is expected since the size attribute of <input> element does not consider wide characters and is an approximation anyway. In general, wide characters like CJK characters takes approximately the width of 2 narrow characters.
Possible solutions
I don't think native JS provides any elegant solution to this issue.
- We either identify wide characters in the string and manually assign 2x size value to them (ugly),
- or compute rendered result and explicitly set the width of
<input>width.
I don't really like either of the solution and this bug is not that important, so I would like to hear from others first on how to handle it.