nuxt / nuxt/ui

PinInput gets stuck after Chinese IME composition when switching back to numeric input

Open
#6,601 5 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

triage
Dominant language
TypeScript
Stars
6.9k
Forks
1.1k
Avg merge
1d 7h
Merged PRs (30d)
57

Description

Environment
Operating system macOS 25.5.0
CPU Apple M5 (10 cores)
Node.js version v24.16.0
nuxt/cli version 3.35.2
Package manager pnpm@11.7.0
Nuxt version 4.4.8
Nitro version 2.13.4
Builder vite@7.3.3
Config app, compatibilityDate, css, devtools, eslint, features, i18n, icon, modules, nitro, pwa, routeRules, runtimeConfig, ui, vite
Modules @nuxt/eslint@1.15.2, @nuxt/ui@4.8.2, @pinia/nuxt@0.11.3, @nuxtjs/color-mode@3.5.2, @nuxtjs/i18n@10.4.0, @nuxt/image@2.0.0, @vite-pwa/nuxt@1.1.1
Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

4.4.8

Reproduction

Reproduction link: I can reproduce this on the official Nuxt UI documentation page:
https://play.ui.nuxt.com/#eNp9kM2qwjAQhV+lzFrq4t6VlAtXcaELFX922ZQ61mg6CclEC9J3N4lYXYi7cL5z4Jvc4N+Y/OIRRlAwNkaVjH+CsqzYrSTNyHjOhiEohj2FAbCrNB1knZ+cpjC9xYWASjdGKrRLw1KTEzDKEomsVEpf5ylj63HwzKsjVucP+cm1MROwsujQXlBAz7i0NfIDTzcLbMO7h43eexXaX+AanVY+Oj5qY0/7oP3WS7azxmjLkuqtm7aM5J5HRdHY7FJfQPi/yZfTX7o/+W/aCeqguwPTg3td

I am not sure whether the playground can reproduce this reliably because the bug depends on switching between Chinese Zhuyin IME composition and English numeric input.

Minimal code:

<template>
  <UPinInput />
</template>
Description

UPinInput can get stuck after using a Chinese IME in one of the input cells.

This issue is not limited to type="number". It can happen with UPinInput in general. English input works normally at first. However, after focusing a cell, switching to a Chinese Zhuyin IME, entering Chinese composition text, and then switching back to English input, that specific cell can become stuck.

Other cells can still work normally, but the cell that previously received Chinese IME composition appears to remain broken until the component is re-rendered or the page is refreshed.

This makes the affected PinInput cell unusable after IME composition has occurred.

I tested the same interaction on Reka UI's PinInput directly. Reka UI does not reproduce the permanent stuck state. This may suggest that the issue is introduced in Nuxt UI's wrapper or IME composition event handling around UPinInput, rather than in Reka UI's core PinInput.

Reka UI still has a minor behavior difference: when an unfinished Zhuyin composition is deleted, focus moves to the next cell instead of staying in the current cell. But it does not permanently break the input cell.

Nuxt UI behavior:

https://github.com/user-attachments/assets/2945dec4-b92f-4d63-9cd2-cb7d0f0c2de2

Reka UI behavior:

https://github.com/user-attachments/assets/9b193b5f-8f43-481b-956a-0934e718868d

Additional context

I also tested the same interaction on Reka UI's PinInput directly. It does not get permanently stuck like Nuxt UI.

The only minor behavior I noticed in Reka UI is that when typing an unfinished Zhuyin composition and deleting it, focus moves to the next cell instead of staying in the current cell. However, the input does not become permanently broken.

This issue seems related to IME composition handling, especially when switching from Chinese Zhuyin IME back to English numeric input.

Logs

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the UPinInput entry point and reproduce the Chinese Zhuyin composition, then switch back to English numeric input in the linked playground. Compare the Nuxt UI wrapper behavior with Reka UI's PinInput; done means the affected cell remains usable after composition without requiring a re-render or page refresh.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.