[LiveComponent] Form input in focus does not reset after submit by hitting enter

[michilehr]

Given I have a form with one field which should reset after submit, the field is not updated (emptied in my case) after hitting the enter button. By clicking the submit button, it works.

Any chance to solve this without writing JavaScript?

Thanks for any help!

#[AsLiveComponent]
class Search extends AbstractController
{
    use DefaultActionTrait;
    use ComponentToolsTrait;
    use ComponentWithFormTrait;

    #[LiveAction]
    public function submit(): void
    {
        $this->submitForm();
        $this->resetForm();
    }

    protected function instantiateForm(): FormInterface
    {
        // we can extend AbstractController to get the normal shortcuts
        return $this->createForm(DeviceBarcodeType::class, ['barcode' => '']);
    }

    private function getDataModelValue(): ?string
    {
        return 'norender|*';
    }
}

<div>
    {{ form_start(form, {
        attr: {
            'data-action': 'live#action:prevent',
            'data-live-action-param': 'submit',
        }
    }) }}
    {{ form_row(form.barcode) }}
    <button
            type="submit"
    >Submit
    </button>
    {{ form_end(form) }}
</div>

[smnandre]

resetForm reinitialize the form in the state it was when you created it normally... Can you explain precisely the suite of steps here (when it's created first, what actions are done, what is the result you get..) ?

[michilehr]

Hi Simon,

thank you very much for your reply!

The above code is the minimal setup for when it does not work as expected. The form is created by the live component on first render.

The component gets imported via {{ component('CheckApp') }} into the template.

The interessting thing: When I blur the element before the submitting with the enter key, it works almost all the time as expected: the form gets emtpied.

What I do now to make it more reliable: I did add another div as parent of the form with a random id. After each submit, I reset the form and regenerate this id (which is also a live prop). By this, it works as expected.

Please let me know if you need more feedback!

[smnandre]

I'm not entirely sure, but the norender|* might be one reason, and the absence of initialFormData could be another. At this point, it's hard to say for certain 🤷

That said, providing a reproducer is more important than it might seem. Without it, I’d need to make several assumptions to match your scenario:

• What version are you using?
• Do you have any other JavaScript libraries installed (e.g., Turbo)?
• Did you include {{ attributes }} in the template?
• What is the device or barcode type?
• Are you passing any initial data?
• ... and so on.

Quickly, this can turn into 10 minutes just trying to set up something that might resemble your case.

The chances of getting help or clear answers are much higher if you provide a repository that others can directly install and test.

I know it may not seem like a big deal, but those extra 10 minutes make a real difference. They allow contributors to focus their (often limited) free time on fixing bugs or adding new features instead of reconstructing your issue.

Nothing personal or against you, just needed to clarify :)

Let me know if none of these suggestions work for you!

[michilehr]

Thank you very much for the explanation. I really understand the issue with helping me and I will of course do anything which helps to resolve the issue (maybe also on my side!)

• Barcode is a simple TextType
• {{ attributes }} is included (sorry - forgot that in the example)

Here is the repo you asked for with the steps to reproduce my issue.

https://github.com/michilehr/symfony-ux-demo

Again, thanks a lot for taking the time @smnandre !

[smnandre]

Thank you very much, that helps digging directly to the code / install.

So indeed there is something here. The problem is .... it is "expected".

Well.. let me explain.

There is a special treatment for the active element of the page during the morph (the process replacing every element from the live component HTML in the page with its new value from the server).

In your specific case, i agree there is something amiss, but that could be handle with stimulus easily i suppose?

But this has been done for the scenarios where there is some time during morph, or to not lose the current content / input position when user is typing).

That is also why we cannot do something on the back-end there..

So i don't know what would be the best way to improve this. Custom JS ? Some specific case to lose/regain focus ?

[michilehr]

Hi @smnandre,

sorry for the late reply!

I already thought about a blur on submit - but actually I came up with a PHP only solution for now: Wrapping the form in a div with a unique id which gets updated on submit.

Twig:

<div id="{{ this.randomIdTrigger }}"
...
</div>      

Live Component:

use ComponentWithFormTrait {
    ComponentWithFormTrait::resetForm as resetFormTrait;
}

...

#[LiveProp(writable: false)]
public string $randomIdTrigger = "0";

...

protected function resetForm(): void
{
    $this->resetFormTrait();
    $this->randomIdTrigger = uniqid();
    ...
}

Thinking about a global solution so people do not need to take care of this.

[smnandre]

Does this also work if you add a data-skip-morph attribute on this div (instead of the id) ? (when you would have changed the id) ?

I like the idea to do one thing on reset

[michilehr]

Yes it works! How could I miss that feature!

[smnandre]

Maybe over-reaching here... but what would be the problem if we added this attribute everytime a Live form is resetted ?

(not talking about how for now haha)