CODEWITHSUNDEEP
phplaravelalpine.jsflowbite
AutoThrottle
AutoThrottle

Reputation: 53

Flowbite & LiveWire - Force re-render

I'm working with the following stack:

My issue is around Livewire updating the entire DOM when content is re-rendered using Flowbite. Specifically, I'm dealing with tooltips and pagination, but I'd imagine the issue will affect all Livewire related components. When the page initially loads, tooltips work as expected. However, when I navigate to page 2, the tooltips stop rendering on hover.

I believe this is a fairly common issue with Livewire and other JS libraries not playing nicely together, because the whole DOM is re-rendered. So far, I've tried forcing the tooltips to re-render when a Livewire update is detected, but that doesn't give me the desired result, and tooltips aren't rendered when Livewire changes the page.

Does anyone have any methods to fix this? I've considered upgrading to Livewire version 3, but it doesn't look like they have made any changes to how the DOM is manipulated.

Thanks

Here's a code example that I'm using:

<div
    id="tooltip-foo{{ $bar->id }}"
    role="tooltip"
    class="
        absolute
        ...
        shadow-sm
        opacity-0
        tooltip
        dark:bg-gray-700">
    {{
        \Carbon\Carbon::parse($bar->birthdate)
            ->format('j F Y, g:i A')
    }}
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

Upvotes: 3

Views: 1679

Answers (4)

Edu Lazaro
Edu Lazaro

Reputation: 1

This approach seems consistent. It's heavier but it doen't rely on random delays:

document.addEventListener('DOMContentLoaded', function () {
    const targetNode = document.body;
    const observer = new MutationObserver(() => {
    initFlowbite();
        document.dispatchEvent(new Event('flowbite:updated'));
    });

    observer.observe(targetNode, { childList: true, subtree: true });
});

Upvotes: 0

Henry Johnston
Henry Johnston

Reputation: 1

I have modified the implementation by adding a delay to give Livewire enough time to process the click event before Flowbite's JavaScript interferes.

This works smoothly in my application.

import { initFlowbite } from 'flowbite';

Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => {
    succeed(({ snapshot, effect }) => {
        setTimeout(() => {
            initFlowbite();
        }, 100); // Adjust the delay as needed
    })
})

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

Upvotes: 0

Dev Kumar Verma
Dev Kumar Verma

Reputation: 11

by using both Drawer is not working of flowbite.

import { initFlowbite } from 'flowbite';

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

so using this only. is this will work for all ?

Upvotes: 0

Sanchez Janampa Juan
Sanchez Janampa Juan

Reputation: 76

In app.js add:

  • Livewire v2:
    import { initFlowbite } from 'flowbite';
    
    Livewire.hook('message.processed', (message, component) => {
        initFlowbite();
    })
  • Livewire v3:
import { initFlowbite } from 'flowbite';

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

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

Upvotes: 6

Related Questions