Incorrect (insufficient) UI size calculation of <input> HTML element in AutocompleteInput.svelte

[hosiet]

The Problem

For the following code in git HEAD:

fava/frontend/src/sidebar/FilterForm.svelte

Lines 107 to 119 in dc3ffb9

	<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:

fava/frontend/src/AutocompleteInput.svelte

Lines 75 to 77 in dc3ffb9

	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
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.

[yagebu]

There's field-sizing: content nowadays, sadly not yet supported on Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/field-sizing.

We could either to at least fix this for many people or otherwise to really fix this one probably has to create a hidden element with the same contents to calculate the size in Javascript.

[hosiet]

Personally I'm ok with the easy and elegant fix, as long as the condition on Firefox does not worsen.