Text-input w. Controlled Value: Caret jumps to end

[sebilasse]

Bug

In the Text-input widget, the caret jumps to the end if you want to add multiple characters in the middle of existing texts. The invalidation / rerender causes the caret to move to the end.

Package Version: current

Expected behavior: If I type 2 o characters after the “Hello” in Hello Dojo!: Hellooo Dojo!

Actual behavior: Helloo Dojo!o

Solution: Cache the caret position right before caching value in the native oninput: icache.set('caret', [event.target.selectionStart, event.target.selectionEnd]);

Set it to undefined in onblur icache.set('caret', void 0);

In the beginning, apply it to the input field after validating:

const inputNode = node.get('input');
if (inputNode && icache.get('caret')) {
  (inputNode as any).setSelectionRange(...icache.get('caret'), 1);
}

[agubler]

Hey @sebilasse, thanks for raising the issue. I can’t seem to replicate the issue. Here’s a codesandbox, if you could change it to demo the issue that would be useful https://codesandbox.io/s/eloquent-wozniak-cm34j?file=/src/main.tsx

[sebilasse]

Tested the Sandbox in different browsers. The issue is in Safari 12.1.2 as described and with iOS Safari. iOS Safari does not allow to jump in the text …