Summary
On Windows, the emoji panel (Win + .) can fail to insert emoji into the editor textarea when the internal textarea has autoCorrect="off".
The emoji panel opens, but selecting an emoji does not dispatch composition/input events to the editor textarea in the failing case. Overriding the textarea to autoCorrect="on" fixes the issue in the same editor and content.
Environment
- Package:
@uiw/react-md-editor
- Observed version:
4.0.11
- Browser: Chromium-based browser on Windows
- OS input: Windows emoji panel via
Win + .
- Content size in repro: long markdown body, around 13k characters
Current upstream source still sets these defaults on the internal textarea:
<textarea
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck={false}
{...other}
/>
Reproduction
- Render an editor with a long markdown value.
<MDEditor
value={longMarkdown}
onChange={setValue}
preview="live"
/>
- Focus the editor textarea somewhere in the long body.
- Press
Win + . on Windows.
- Select an emoji from the Windows emoji panel.
Actual behavior
The emoji panel opens, but the selected emoji is not inserted into the editor textarea.
In event tracing, the editor textarea only receives the key events around opening the panel, for example keydown Meta / keyup Period. After selecting an emoji, no compositionstart, beforeinput, or input event reaches the textarea.
Expected behavior
Selecting an emoji from the Windows emoji panel should insert the emoji into the editor textarea and dispatch the normal composition/input events.
Debugging notes
The issue appears tied specifically to autoCorrect="off" on the textarea:
- A native textarea with the same long value accepts emoji input correctly.
- A cloned textarea outside the editor tree also accepts emoji input correctly.
- The actual editor textarea starts accepting emoji immediately when
autocorrect is changed to on at runtime.
- Changing only
spellcheck, autocomplete, or autocapitalize did not fix the issue in my test.
Workaround
Passing autoCorrect: "on" through textareaProps fixes the issue downstream:
<MDEditor
value={value}
onChange={setValue}
textareaProps={{
autoCorrect: "on",
}}
/>
Possible fix
Consider not forcing autoCorrect="off" by default, or documenting this Windows emoji-panel interaction and the textareaProps.autoCorrect = "on" workaround.
Summary
On Windows, the emoji panel (Win + .) can fail to insert emoji into the editor textarea when the internal textarea has
autoCorrect="off".The emoji panel opens, but selecting an emoji does not dispatch composition/input events to the editor textarea in the failing case. Overriding the textarea to
autoCorrect="on"fixes the issue in the same editor and content.Environment
@uiw/react-md-editor4.0.11Win + .Current upstream source still sets these defaults on the internal textarea:
Reproduction
Win + .on Windows.Actual behavior
The emoji panel opens, but the selected emoji is not inserted into the editor textarea.
In event tracing, the editor textarea only receives the key events around opening the panel, for example
keydown Meta/keyup Period. After selecting an emoji, nocompositionstart,beforeinput, orinputevent reaches the textarea.Expected behavior
Selecting an emoji from the Windows emoji panel should insert the emoji into the editor textarea and dispatch the normal composition/input events.
Debugging notes
The issue appears tied specifically to
autoCorrect="off"on the textarea:autocorrectis changed toonat runtime.spellcheck,autocomplete, orautocapitalizedid not fix the issue in my test.Workaround
Passing
autoCorrect: "on"throughtextareaPropsfixes the issue downstream:Possible fix
Consider not forcing
autoCorrect="off"by default, or documenting this Windows emoji-panel interaction and thetextareaProps.autoCorrect = "on"workaround.