The Problem
For the following code in git HEAD:
|
<AutocompleteInput |
|
bind:value={fql_filter_value} |
|
placeholder={_("Filter by tag, payee, …")} |
|
suggestions={fql_filter_suggestions} |
|
key="f f" |
|
clearButton={true} |
|
setSize={true} |
|
{valueExtractor} |
|
{valueSelector} |
|
onBlur={submit} |
|
onSelect={submit} |
|
onEnter={submit} |
|
/> |
Looks like its size is computed based on text size, after applying translation:
|
let size = $derived( |
|
setSize ? Math.max(value.length, placeholder.length) + 1 : undefined, |
|
); |
...which works great in the default scenario:
-> % 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:
-> % 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
13This 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.
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:
...but fails to handle CJK characters with wide characters:
This is expected since the
sizeattribute 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.
<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.