Flowbite modals issue.

[GianmarcoVarroneDev]

I'm having a real hard time using Flowbite's modals with Livewire. I have a Blade view restaurants.index rendering the x-layout Blade component, calls the livewire:restaurants/ component, and the modal for creating a new resource. (restaunts.index view code)

The livewire:restaurants/ view component has the following code while, the Restaurants class component has the following inside.

class Restaurants extends Component
{
    use WithPagination;

    public $categories;
    protected $restaurants;

    public function delete($id)
    {
        Restaurant::find($id)->delete();
    }

    public function render()
    {
        $this->categories = Category::where('type', 'Restaurant')->get();
        $this->db_restaurants = Restaurant::all();
        $google_places_api = new PlacesApi(env('GOOGLE_MAPS_API_KEY'));
        $restaurantsGooglePlacesResponse = array();

        foreach ($this->db_restaurants as $restaurant) {
            $response = $google_places_api->placeDetails($restaurant->google_place_id);
            $details = $response['result'];
            $photo_reference = array_shift($details['photos'])['photo_reference'];
            $photo_url = $google_places_api->photo($photo_reference, $params = ['maxheight' => 400, 'maxwidth' => 400]);
            $details['photo_url'] = $photo_url;
            $details['internal_restaurant_id'] = $restaurant->id;
            $details['internal_created_at'] = $restaurant->created_at;
            array_push($restaurantsGooglePlacesResponse, $details);
        }

        $this->restaurants = collect($restaurantsGooglePlacesResponse)->paginate(8);

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

The issue that I'm facing is that, on the first-page loading, each of the three modals is showing and working correctly. Still, when I perform a Livewire action (ex., deleting a record via the delete() method), modals either stop working at all or, if they work, are not appropriately rendered (for example, generated on the top left corner of the page).

This seems to be a peculiar behavior caused by Livewire. Do you have any idea of what can cause this issue and how to solve it?

[apydevs]

This also happens with the Drawer component when you change the paginate number

[zoltanszogyenyi]

Hey @GianmarcoVarroneDev @apydevs,

Perhaps you can try initialising the modals/drawers etc using an onMounted lifecycle method similar to what you can do with Vue or React?

Here's an example: https://flowbite.com/docs/getting-started/vue/#data-attributes

Cheers,
Zoltan

[r3nandotdev]

For me, using wire:ignore on modal tag worked just fine to prevent modal from flicking and hide.

But now when I search for something and erase the search, the buttons that triggers the modal just lost the event listener

[yassinetrbls]

Hello, same issue with the accordion...

[jjanampa]

In addition to using "wire:ignore" in the modals, you must add the following code in app.js in livewire v3:

import { initFlowbite } from 'flowbite';
Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => {
    succeed(({ snapshot, effect }) => {
        queueMicrotask(() => {
            initFlowbite();
        })
    })
})

document.addEventListener('livewire:navigated', () => {
    console.log('navigated');
    initFlowbite();
})

[PinKevin]

I tried this code, and it works for the modal and accordion behavior to show correctly, but it has a problem when showing that content. When modal is shown, the backdrop effect and click on the outside of modal is not working properly. Is there any further solution?