fix(ui5-input): prevent typeahead during IME composition #11976
Conversation
aleksandar-terziev
commented
Jul 22, 2025
aleksandar-terziev
commented
- fix [SF_ACC] [Input] Korean characters are duplicated when typing in the Input component with Suggestion Items. #11922
| if (input) { | ||
| input.addEventListener("compositionstart", this._onCompositionStart.bind(this)); | ||
| input.addEventListener("compositionend", this._onCompositionEnd.bind(this)); | ||
| } |
There was a problem hiding this comment.
As we discussed, Preact does not support composition events so we need this workaround until Preact resolves the bug
packages/main/src/Input.ts
Outdated
| } | ||
|
|
||
| onExitDOM() { | ||
| ResizeHandler.deregister(this, this._handleResizeBound); | ||
| deregisterUI5Element(this); | ||
| this._removeLinksEventListeners(); | ||
| const input = this.getInputDOMRefSync(); |
There was a problem hiding this comment.
if present in the template, this should not be required
packages/main/src/Input.ts
Outdated
| } | ||
|
|
||
| onEnterDOM() { | ||
| ResizeHandler.register(this, this._handleResizeBound); | ||
| registerUI5Element(this, this._updateAssociatedLabelsTexts.bind(this)); | ||
| const input = this.getInputDOMRefSync(); | ||
| if (input) { | ||
| input.addEventListener("compositionstart", this._onCompositionStart.bind(this)); |
There was a problem hiding this comment.
In addition to what Martin said - even if you were to write this here (and not in the template), you still can't use .bind for addEventListener and then again .bind for removeEventListener because each time you call bind, it returns a new function and this creates a memory leak. If you need to do something like this, you must assign to a variable and then call addEventListener with it, f.e.
this._onCompositionStartBound = this._onCompositionStart.bind(this);
input.addEventListener("compositionstart", this._onCompositionBound;
aleksandar-terziev
force-pushed
the
input-text-composition
branch
from
1dc2ffb to
10e750c
Compare
| @@ -590,8 +590,10 @@ export namespace JSXInternal { | |||
|
|
|||
| // Composition Events | |||
| onCompositionEnd?: CompositionEventHandler<Target> | undefined; | |||
| oncompositionend?: CompositionEventHandler<Target> | undefined; | |||
There was a problem hiding this comment.
add comment that this is a workaround for preactjs/preact#1978
There was a problem hiding this comment.
Similar approach as the initial one was used in other UI library: https://github.com/ionic-team/ionic-framework/pull/24735/files#diff-a39147111a459c7d50e285f51eddf2d3fee983bda67654c842a2c645565af6bcR281
It could be used as well in order to not change 3rd party files
There was a problem hiding this comment.
I added comment that this is a workaround and used the same approach used in other UI libraries as @nnaydenow shared in order to avoid changing third party files ( jsx.d.ts )
aleksandar-terziev
force-pushed
the
input-text-composition
branch
from
10e750c to
9f8c8ff
Compare
aleksandar-terziev
force-pushed
the
input-text-composition
branch
2 times, most recently
from
4ebc5b7 to
5f309da
Compare
aleksandar-terziev
force-pushed
the
input-text-composition
branch
from
5f309da to
1c59e4a
Compare
