[InlineEdit] Unable to edit text field as a prepend

[llupa]

Hello,

At https://ux.symfony.com/demos/live-component/inline-edit when positioning your cursors anywhere other than the end of the input field after your first keystroke the cursors jumps at the end.

I wanted to type Yellow Banana 🍌 and this is how it looks like on first key-stroke. To achieve a prepend, one has to move the cursor per letter.

Unfortunately I cannot help with this since I am looking at the demos to get back into trying JS after a decade of not working with it, but I wanted to report the issue at least.

Hello,

We're also having the same problem in a project.
On component update/render, the text cursor is repositioned at the end of input disregarding its position at the moment of live component update.
So editing from the middle of the input value or at the beginning of its value cannot be done properly without re-positioning the cursor after each char entered.

We are using these versions in composer.json:

Component is called in a simple controller rendering template index.html.twig:

{{ component('Test') }}

Component template Test.html.twig:

<div {{ attributes }}>
  <input type="number" data-model="max">

  Generating a number between 0 and {{ max }}
  <strong>{{ this.randomNumber }}</strong>
</div>

Component code:

<?php

namespace App\Twig\Components;

use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class Test
{
    use DefaultActionTrait;

    #[LiveProp(writable: true)]
    public int $max = 1000;

    public function getRandomNumber(): int
    {
        return rand(0, $this->max);
    }
}

[weaverryan]

Fixed and test case added over at #1501 - we expected a few hiccups when we converted the internal morphing library from morphdom to idiomorph.