Bug: Controlled input resets unexpectedly with Japanese IME (full-width alphanumeric) on Windows 10 #34485
Description
Hello everyone, I need your help.
I have a React component with a custom onChange handler that only allows numeric input (both half-width and full-width in Japanese).
When I type full-width characters using Microsoft IME, the input unexpectedly loses the old value.
I don’t understand why this happens, because I don’t call setValue when the input is not numeric.
This issue only occurs on Windows 10.
React version:
- React 18.2.0
- Window 10 Pro 22H2
Steps To Reproduce
- Change system input method to Japanese (Microsoft IME)
- Select Full-width Alphanumeric
- Enter some text. Example "hello"
Link to code example: https://codesandbox.io/p/sandbox/nmjj5j
Quick view component:
import { ChangeEvent, useState } from "react";
import "./styles.css";
const NUMERIC_REGEX = /^[0-9０-９-－]*$/;
export default function App() {
const [value, setValue] = useState("123456");
// handlers
const handleChangeValue = (e: ChangeEvent<HTMLInputElement>) => {
const currentValue = e.target.value;
// handle validate numberic input
if (!NUMERIC_REGEX.test(currentValue)) {
return;
}
setValue(currentValue);
};
return (
<div className="App">
<h1>Hello Everyone</h1>
<h2>
Start editing input using fullwidth japanese input method to see issues
</h2>
<input value={value} onChange={handleChangeValue} />
</div>
);
}
The current behavior
The input loss old value
Windows10.-.VMware.Workstation.2025-09-14.12-33-18.mp4
The expected behavior
The input must keep old value