Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

Open
Assignees
Labels

Description

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:

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.

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      AltStyle によって変換されたページ (->オリジナル) /