wire:navigate causing issue in opening model and other mary-ui components

ineffablesam commented 4 months ago

maryUI version

1.26

daisyUI version

4.9.0

Livewire version

3.3.4

What browsers are affected?

Firefox, Chrome, Safari, Microsoft Edge

What happened?

I'm encountering an issue on my website (Demo Website) where some components of MaryUI fail to load when navigating using wire:navigate. I've attempted to resolve this by setting inject_assets to false in Livewire, but the issue persists.

Is there a way to reinitialize MaryUI() through JavaScript so I can attempt to resolve this issue programmatically? or any workaround for this issue ? other than using traditional anchor navigation?

robsontenorio commented 4 months ago

It is really hard to say what is going on. Because I don't know how you have set things up or how you are mixing it.

All the maryUI demos uses wire:navigate and there is no issue on loading components.

https://mary-ui.com/docs/demos

There is no way to start anything, because maryUI does not use javascript. It is just blade components.

ineffablesam commented 4 months ago

Yep even i have went through the code of mary-ui website and the only difference is you are using volt and im using standard Livewire component

here is the code for endpoint https://erp.vitap.app/all-events

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Event;
use DateTime;
use Livewire\Attributes\Url;

class AllEvents extends Component
{

    public $events = [];
    #[Url(keep: true, history: true)]
    public $search = '';

    protected $queryString = ['search'];

    protected function formatStartDate($event)
    {
        // Get the event start timestamp
        $startTimestamp = $event->event_starts_on;

        // Convert the timestamp to a DateTime object
        $startDate = new DateTime($startTimestamp);

        // Format the date as required
        return $startDate->format('D, M d • h:i A');
    }
    public function render()
    {

        $searchString   = implode('%', str_split($this->search));
        // Fetch paginated featured events
        $events = Event::where('is_published', 1,)
            ->where('status', 'APPROVED')
            ->where('title', 'ilike', '%' . $searchString . '%',)
            ->with('dates')
            ->with('dates:event_starts_on')
            ->select('thumbnail', 'title', 'location', 'category_id', 'slug')
            ->with('category:id,name')
            ->get();
        $this->events = $events;

        return view('livewire.all-events', [
            'events' => $this->events
        ]);
    }
}

HTML/Blade

<section>
    <div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
        <span class="flex items-center">
        </span>
        <x-header title="All Events" subtitle="Explore our events" class="py-6">
            <x-slot:middle class="!justify-end">
                <x-input wire:model.live="search" icon="o-magnifying-glass" placeholder="Search..." />
            </x-slot:middle>
        </x-header>

        @if ($events->isEmpty())
            <div class="flex items-center justify-center h-96">
                <div class="flex flex-col items-center">
                    <x-lucide-search class="w-16 h-16 text-gray-400" />
                    <h2 class="text-2xl font-bold mt-4 text-gray-900">No events found</h2>
                    <p class="text-gray-500">We couldn't find any events matching your search{{ $search }}</p>
                </div>
            </div>
        @endif
        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:items-stretch">
            <div class="lg:col-span-2 lg:py-4">
                <ul class="grid grid-cols-2 gap-4">
                    @foreach ($events as $event)
                        <li wire:key="{{ $event->id }}" class="">
                            <a wire:navigate class="cursor-pointer"
                                href="{{ route('event.details', ['slug' => $event->slug]) }}">
                                <div
                                    class="mx-auto flex w-96 flex-col justify-center bg-white rounded-2xl hover:shadow-xl hover:shadow-slate-300/40 transition">
                                    <!-- img -->
                                    <div class="relative mx-3 mt-3 flex h-60 overflow-hidden rounded-t-xl"
                                        href="#">
                                        <img loading="lazy" placeholder="blur"
                                            class="hover:scale-105 ease-in duration-150 w-96 rounded-t-2xl object-cover object-center"
                                            src={{ '/storage/' . $event->thumbnail }} />
                                        <span
                                            class="absolute top-0 left-0 m-2 rounded-full bg-black px-2 text-center text-sm font-medium text-white">39%
                                            OFF</span>
                                    </div>

                                    <!-- text information -->
                                    <div class="p-4">
                                        @if ($event->category)
                                            <small
                                                class="text-secondary-text-purple text-xs">{{ $event->category->name }}</small>
                                        @endif
                                        <h1 class="text-xl font-bold text-slate-600 pb-2">{{ $event->title }}
                                        </h1>
                                        <p
                                            class="text-sm flex py-1 space-x-1 items-center flex-row tracking-tight font-light text-slate-400 leading-6">
                                            <x-lucide-map-pin class="w-5 h-5 text-gray-500" />
                                            {{ $event->location }} IST
                                        </p>

                                    </div>
                                </div>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>

</section>

You can see that i have configured as same as the mary-ui documentation This issue occurs only when using wire:navigate to move to the /all-event page from the Home nav bar and if i force reload the page it starts working normally , Same for the Modals, Spotlight... etc

robsontenorio commented 4 months ago

Unfortunately I am not able to debug your site, because it depends of a ton of things and how you have set it up. Probably you would have similar issue with another UI library.

The issue is not about the code above, but on how the things/libs are wired up on your environment.

Fore sure, if you spin up a brand new Laravel Project and install maryUI it will work.

If you wanna try a demo with maryUI this one is open source. https://github.com/robsontenorio/paper.mary-ui.com

robsontenorio / mary