Livewire popover button detail not displaying

Hi all - I'm building a filter feature on a datatable as detailed in Caleb's screencast series. I've built the popover functionality and can see that all of the rows are present when I inspect the page, but the filter choices ('schools' in this case) do not display when the button is clicked. I'm presuming that this is an Alpine issue that I've messed up, but I can't see where I've gone wrong.

The popover code is below. Any help is appreciated!

//schools.blade.php
<x-popover>
    <div>
        <x-popover.button class="flex items-center gap-2 rounded-lg border pl-3 pr-2 py-1 text-gray-600 text-sm">
            <div>Filter</div>
            <x-heroicons.chevronDown/>
        </x-popover.button>
    </div>

    <x-popover.panel class="border border-gray-100 shadow-xl z-10 w-64 overflow-hidden">
        <div class="flex flex-col divide-y divide-gray-100">
            @foreach ($filters->schools() as $school)
                <label class="flex items-center px-3 py-2 gap-2 cursor-pointer hover:bg-gray-100">
                    <input value="{{ $school->id }}" wire:model.live="filters.selectedProductIds" type="checkbox" class="rounded border-gray-300">

                    <div class="text-sm text-gray-800">{{ $school->name }}</div>
                </label>
            @endforeach
        </div>
    </x-popover.panel>
</x-popover>

//x-popover.button
<button type="button" x-popover:button {{ $attributes }}>
    {{ $slot }}
</button>

//x-popover.panel
@props(['position' => 'bottom-center'])

<div
    x-popover:panel
    x-cloak
    x-transition.out.opacity
    x-anchor.{{ $position }}.offset.1="document.getElementById($id('alpine-popover-button'))"
    {{ $attributes->merge([
        'class' => 'absolute left-0 mt-2 bg-white rounded-md',
    ]) }}
>
    {{ $slot }}
</div>

Thanks!

LaryAI

1 year ago

Best Answer

Level 58

It looks like you're trying to implement a popover using Alpine.js and Livewire, but the popover panel is not displaying when the button is clicked. This could be due to a few reasons, such as missing Alpine.js directives or incorrect usage of the x-popover directives.

Here are a few steps to troubleshoot and potentially fix the issue:

Ensure Alpine.js is Loaded: Make sure that Alpine.js is properly included in your project. You can add it via a CDN in your main layout file:
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
```
Check Alpine.js Directives: Ensure that the Alpine.js directives are correctly applied. The x-popover:button and x-popover:panel directives should be properly recognized by Alpine.js.

Use x-data and x-show: Instead of relying on custom x-popover directives, you can use x-data and x-show to control the visibility of the popover panel. Here is a modified version of your code:

// schools.blade.php
<div x-data="{ open: false }" class="relative">
    <div>
        <button @click="open = !open" class="flex items-center gap-2 rounded-lg border pl-3 pr-2 py-1 text-gray-600 text-sm">
            <div>Filter</div>
            <x-heroicons.chevronDown/>
        </button>
    </div>

    <div x-show="open" @click.away="open = false" class="absolute left-0 mt-2 bg-white rounded-md border border-gray-100 shadow-xl z-10 w-64 overflow-hidden">
        <div class="flex flex-col divide-y divide-gray-100">
            @foreach ($filters->schools() as $school)
                <label class="flex items-center px-3 py-2 gap-2 cursor-pointer hover:bg-gray-100">
                    <input value="{{ $school->id }}" wire:model.live="filters.selectedProductIds" type="checkbox" class="rounded border-gray-300">
                    <div class="text-sm text-gray-800">{{ $school->name }}</div>
                </label>
            @endforeach
        </div>
    </div>
</div>

Ensure Livewire is Working: Make sure that Livewire is properly set up and working in your project. You should have the Livewire scripts included in your main layout file:
```
@livewireStyles
@livewireScripts
```
Check for Errors: Open your browser's developer console and check for any JavaScript errors that might indicate what is going wrong.

By following these steps, you should be able to get the popover functionality working correctly. If the issue persists, please provide more details or any error messages you are seeing.

Rretzko

1 year ago

Level 15

This helped me troubleshoot a different and earlier error precluding Alpine from working. I'll start a separate thread for the correct error.

Please or to participate in this conversation.