Placeholder Text Gets Truncated When Using Japanese Characters

[emikolocolv]

Hello,

I've encountered an issue when setting the placeholder text in Japanese (e.g., "エリアを選択してください") using choices.js. The generated input element looks like this:

<input type="search" class="choices__input choices__input--cloned" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" aria-label="エリアを選択してください" placeholder="エリアを選択してください" style="min-width: 13ch; width: 1ch;">

The problem is that the min-width is set to 13ch, which causes the placeholder text to be truncated. It would be helpful if there was an option to set the width of the input[type=search] or to customize it in some way.

I'm not entirely sure how this is implemented, and I would appreciate any assistance or guidance on how to address this issue.

Thank you for your help!

[Xon]

"エリアを選択してください".length returns a length of 12 characters, and the ch unit assumes non-variable width fonts which is probably what is wrong.

Monkey patching instance.input.setWidth may be the best solution.

The original definition is this;

  setWidth(): void {
    // Resize input to contents or placeholder
    const { element } = this;
    element.style.minWidth = `${element.placeholder.length + 1}ch`;
    element.style.width = `${element.value.length + 1}ch`;
  }