"->push()" not working on backend livewire component. about tall-toasts

[jacksontong]

I'm not sure if this is a correct way to fix it but if I change dehydrate to rendered then it works (for unit test as well).

trait WireToast
{
    public function renderedWireToast(): void
    {
        if (! ToastManager::componentRendered()) {
            foreach (ToastManager::pull() ?? [] as $notification) {
                $this->dispatch(
                    'toast',
                    message: $notification['message'],
                    title: $notification['title'],
                    type: $notification['type'],
                    duration: $notification['duration'],
                );
            }
        }
    }
}

livewire(DocumentEditor::class)
    ->call('toastTest')
    ->assertDispatched(
        'toast',
        message: 'The document has been refreshed.',
        type: NotificationType::$success,
    );

[cybernerdie]

I also realized that when notifications are triggered from the backend, i need to manually refresh the page before it shows up, do you have same experience? @marchershey

[marchershey]

I've also customized the views a tad bit, so I'll post those as well. I do doubt that the changes I've made in the views are affecting it, but ya never know. I may be overlooking an issue. I did try to remove my custom views and use the default, but no luck.

• livewire/toasts.blade.php

<div class="z-[99] fixed top-0 right-0 w-full max-w-md" x-data='ToastComponent($wire)' @mouseleave="scheduleRemovalWithOlder()">
    <template x-for="toast in toasts.filter((a)=>a)" :key="toast.index">
        <div @mouseenter="cancelRemovalWithNewer(toast.index)" @mouseleave="scheduleRemovalWithOlder(toast.index)" @click="remove(toast.index)" x-show="toast.show===1" x-transition:enter="transform ease-out duration-300 transition" x-transition:enter-start="-translate-y-10 opacity-0 sm:translate-y-0 sm:translate-x-10" x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-init="$nextTick(() => { toast.show = 1 })">
            @include('tall-toasts::includes.content')
        </div>
    </template>
</div>

• includes/content.blade.php

<div class="p-3 mx-4 my-4 mb-5 text-gray-800 bg-white border border-gray-300 rounded-lg shadow-2xl sm:mx-6" x-bind:class="{
    'bg-blue-50': toast.type === 'info',
    'bg-green-50': toast.type === 'success',
    'bg-yellow-50': toast.type === 'warning',
    'bg-red-50': toast.type === 'danger'
}">
    <div class="flex items-center space-x-3">
        <div>
            @include('tall-toasts::includes.icon')
        </div>
        <div class="w-full">
            <div class="text-base font-medium leading-5" x-html="toast.title" x-show="toast.title !== undefined" :class="{ 'mb-1': toast.title }"></div>
            <div class="text-sm leading-5" :class="toast.title ? 'text-muted' : ''" x-show="toast.message !== undefined" x-html="toast.message"></div>
        </div>
        <div>
            <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
        </div>
    </div>
    {{-- content --}}
    {{-- close --}}
</div>

• includes/icon.blade.php

<template x-if="toast.type==='info'">
    <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
</template>

<template x-if="toast.type==='success'">
    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
</template>

<template x-if="toast.type==='warning'">
    <svg class="w-6 h-6 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
    </svg>
</template>

<template x-if="toast.type==='danger'">
    <svg class="w-6 h-6 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
    </svg>
</template>

[usernotnull]

I went through the last changes and noticed some livewire v3 breaking changes were not implemented in the latest contribution.
I'm pushing v2.0.1 soon, let me know if it resolves the issue.

[cybernerdie]

Thanks for your prompt response, how soon will this push be made? @usernotnull

[usernotnull]

Unfortunately, the changes are deeper than I expected. The lifecycles are changed, leading to console error logs when the page loads. That's why the toasts work in certain circumstances (called from JS or backend) but not from a livewire component.
I'll have to put a halt on this and label for help from the community as I have no time to delve into the livewire v3 changes.

[marchershey]

Any updates on this issue?

[jacksontong]

@usernotnull can you give us some insights how to fix this?

[usernotnull]

I'm not sure if this is a correct way to fix it but if I change dehydrate to rendered then it works (for unit test as well).

trait WireToast
{
    public function renderedWireToast(): void
    {
        if (! ToastManager::componentRendered()) {
            foreach (ToastManager::pull() ?? [] as $notification) {
                $this->dispatch(
                    'toast',
                    message: $notification['message'],
                    title: $notification['title'],
                    type: $notification['type'],
                    duration: $notification['duration'],
                );
            }
        }
    }
}

livewire(DocumentEditor::class)
    ->call('toastTest')
    ->assertDispatched(
        'toast',
        message: 'The document has been refreshed.',
        type: NotificationType::$success,
    );

The Unit tests don't test the rendered state of the toast on the frontend.

@marchershey can you apply this fix and confirm it working?

[usernotnull]

I have tested the above and found it resolved the situation. Thanks @jacksontong!
As this is a critical fix, I'll immediately tag a new release and wait for further feedback from the community.

Feel free to re-open.