Caret position lost after pasting text to input field

Bugs
1

Here is a Playground
Steps to reproduce :

  • Copy some text line 20
  • Paste it to the input field

Result is that the Caret (cursor) ends up in the middle, and at a pretty much random position.

Screenshot from 2024-07-19 18-05-54
Screenshot from 2024-07-19 18-05-54727×134 2.63 KB

If you delete and paste again it will be at another place. If you right “Hello”, select all, and paste, it will be yet at another place.

2

on it!

1 Like
3

Here we are:
Fix copy paste caret positioning by deltakosh · Pull Request #15309 · BabylonJS/Babylon.js (github.com)

1 Like
4

Actually. @Deltakosh . Is there a way to get the location of the caret cursor, and insert text/delete text before or after the cursor? I tried looking in the source, but you might know an immediate quick solution. The use case is that webxr quest keyboards fully erase whatever is in the document text object, so i want to manually implement adding text on the TextInputArea at cursor location.

Unless, you completely know a better way.

5

I might have found it. I found the processKey command. Is this the best way to do it?

6

Hello @jdtokyo
I’m with you on this (the need to have a public method to set caret position).
I remember that I had some issues for my Chat Project (Online chat 100% based on BJS GUI)

Having a look back to my code, I get to this :

// Goal is to put Input Caret at the end (only private)
// https://forum.babylonjs.com/t/set-input-caret-position/32778/3
function triggerArrowDown() {
    let evt = new KeyboardEvent('keydown', {
        key: 'ArrowDown',
        code: 'ArrowDown',
        keyCode: 40,
        which: 40,
        bubbles: true,
        cancelable: true,
        view: window
    });
    canvas.dispatchEvent(evt);
}

Funny enough, the comment even contains a topic of this forum that I had in mind to come back to :