[LiveComponent] Form inputs are sometimes cleared

[tijnema]

When working with live forms, we see that sometimes inputs are being cleared. Its probably related to the component rerender while typing. It is hard to reproduce by hand (although our customers sometimes experience this), we see this consistently when using automated browser tests.

Easy way to reproduce is with the following testcafe script:

import {Selector} from "testcafe";

fixture `Test`;

test('Test bug', async t =>  {
    await t.navigateTo('https://ux.symfony.com/demos/live-component/auto-validating-form');

    await t.typeText('#registration_form_password', 'verysecretpassword', { replace: true, paste: true });
    await t.typeText('#registration_form_email', 'someemail@symfony.com', { replace: true, paste: true });

    await t.click('#registration_form_terms');
    await t.click('form[name=registration_form] button[type=submit]');

    await t.expect(Selector('div').withText('Welcome someemail@symfony.com!').visible).ok();
});

Save this as livebug.ts, install testcafe with npm i -g testcafe, then run with testcafe chrome livebug.ts.
It works fine when using --speed 0.5 as extra argument.

1.mp4