Setting maxLength in one input causes incorrect caret position on another input

This issue has been tracked since 2022-07-05.

Simple-keyboard version

Describe the bug
I have one instance of the keyboard an a directive that changes the input id on focus.
Now in my login screen I have a UserId with maxLength: 3 and Password field with no maxLength limitation.

const options: KeyboardOptions = { inputName: || 'default', maxLength: this._inputTarget.maxLength > -1 ? this._inputTarget.maxLength : undefined, }; this._keyboard.setOptions({ options });

When I type in the UserId field more then 3 chars it looks fine (eg 1234 only shows 123)
Now I focus in the password field and start typing "1235" it looks like this


I would expect to have "1235"

At the end of the onChange callback function I have this
this._inputTarget.setSelectionRange(this._keyboard.caretPosition, this._keyboard.caretPosition);

hodgef wrote this answer on 2022-07-14

Hello @ray-kay,

Could you provide a repro for debugging? Will reopen the ticket once that is provided.

Francisco Hodge

ray-kay wrote this answer on 2022-07-14

Hi @hodgef

please see this demo repo:

If you type in more then 3 chars in the first field and then focus and type in the other field eg 123 its showing 321


Thanks for looking into this

Br Ralf

hodgef wrote this answer on 2022-07-14

Hey Ralf,

Thanks for providing the repro. The maxLength option should either affect all inputs as a boolean or affect "some" inputs by passing an object.

Here's the fix:

Francisco Hodge

ray-kay wrote this answer on 2022-07-14

Thanks for clarifying @hodgef
I simply missunderstood the documentation (

More Details About Repo
Owner Name hodgef
Repo Name simple-keyboard
Full Name hodgef/simple-keyboard
Language JavaScript
Created Date 2018-03-02
Updated Date 2022-12-02
Star Count 1737
Watcher Count 20
Fork Count 130
Issue Count 0


Issue Title Created Date Updated Date