Filament•2mo ago

Component not found after Standalone Form Submission

I create a Standalone Filament Form inside a Livewire Component. I am only able to submit the form for the first time, the next time I click the submit button, I get a javascript error livewire.esm.js:8341 Uncaught Component not found: CmxiE7XWv7BNlojJe6Z5. Has someone faced a similar issue? What could be causing it?

14 Replies

Abi•2mo ago

any advice on why this issue may occur? The only way I can re-submit the form again is by refreshing the page and again only once.

toeknee•2mo ago

Did you mount and fill the form correctly?

Abi•2mo ago

Yes, the form displays correctly, but i am able to submit the form only once and the next time I try, I get a console error as mentioned above. The problem is, I have this problem only with this single form and not the other forms on the project, still trying to figure what the issue may be. if the form is used only to accept data like a contact us form, do I still need to call the form->fill() method on mount? I only call $this->form->fill() after the form is submitted to reset it.

toeknee•2mo ago

What is it you are trying to do? are you submitting it and it works fine, then you form->fill after it has saved and try to submit again and you get the error? try: $this->reset(); instead.

Abi•2mo ago

correct

Abi•2mo ago

reset doesn't help with the console error. For some reason, the wire:snapshot attribute for the livewire seems lost but the wire:id is still the same (see video) https://share.cleanshot.com/57ZFGM9q . But the strange thing is I am not sure where this new componentId is getting reset. The form elements still have the same key's as it was initialized. Re-submiting the form shows an missing component with id that is not on the DOM at all.

CleanShot Cloud

CleanShot 2024-05-14 at 19.16.09

Video uploaded to CleanShot Cloud

Abi•2mo ago

Here is my form code

<form class="mx-auto contact-us-form" wire:submit.prevent="sendMessage">
    {{$this->form}}

    <div class="flex items-center justify-between sm:col-span-2 mt-6">
        <button type="submit"
                class="inline-block px-8 py-3 text-sm font-semibold text-center text-white transition duration-100 bg-blue-600 rounded-md outline-none hover:bg-blue-500 active:bg-blue-700 ring-blue-300 md:text-base">
            Send Message
        </button>
    </div>
</form>

<form class="mx-auto contact-us-form" wire:submit.prevent="sendMessage">
    {{$this->form}}

    <div class="flex items-center justify-between sm:col-span-2 mt-6">
        <button type="submit"
                class="inline-block px-8 py-3 text-sm font-semibold text-center text-white transition duration-100 bg-blue-600 rounded-md outline-none hover:bg-blue-500 active:bg-blue-700 ring-blue-300 md:text-base">
            Send Message
        </button>
    </div>
</form>

Abi•2mo ago

Here is the the Livewire component code https://gist.github.com/abishekrsrikaanth/b68f29206e4e34f432510d42d55fc940

Gist

toeknee•2mo ago

Do you have a div wrapper around the form?

Abi•2mo ago

yes, its a livewire component that the form is in.

Abi•2mo ago

anything else seem odd to you on the code? Just not sure where I am going wrong, the problem seems to be just this form alone one additional note though, I am force injecting livewire and have 'inject_assets' => false on the livewire config since I use alpine js components on my app

toeknee•2mo ago

Only thing I would say is to ensure you have <x-filament-actions::modals /> after </form> you shouldn't need wire:prevent either, it should just be wire:submit

Abi•2mo ago

do I need <x-filament-actions::modals /> if I don't have any modals? tried the above suggestion, did not help. I have to force reload the page after submission using $this->js('window.location.reload()'); as a hack.

toeknee•2mo ago

It's good practice since if you don't add it but then add actions in the form it'll not work. Something isn't quiet right, since it's not refreshed the livewire component

Gaming

Programming

Component not found after Standalone Form Submission