FilamentF
Filament•14mo ago
UnderOath777

Help with Filament Modal Component

I'm using the Filament modal to open a chatbot interface defined in a custom Livewire component. I would like to scroll to the bottom of the chat interface when the modal is open. I was using the model-opened event to scroll to the bottom, but it's not working as I expected. It seems that modalElement.scrollHeight is set to 0, and even if I hardcode a position in the scrollTo method, it doesn't take effect. It feels like I might have the wrong element. Does anyone have recommendations or solutions on how I can resolve this?

<x-filament::modal
    width="lg"
    heading="Chatbot"
    id="chatbot-modal"
    slide-over="true"
    stickyHeader="true"
    @modal-opened="
        $nextTick(() => {
            const modalElement = $refs.modalContainer
            modalElement.scrollTo({
                top: modalElement.scrollHeight,
                behavior: 'smooth'
            });
        })
    "
>
    <x-slot
        name="trigger"
        class="fixed bottom-4 right-4 rounded-full bg-primary-500 p-4 hover:bg-primary-200"
    >
        <x-filament::icon
            class="h-5 w-5 text-white"
            icon="heroicon-o-chat-bubble-left"
        />
    </x-slot>
    @livewire('filament-chatbot')
</x-filament::modal>
Was this page helpful?