Livewire popover component doesn't open when clicked

Hi - I'm following the Livewire 3 screencast on Product Filtering. The popover button displays but nothing happens when I click on the button. I get an error (Uncaught Alpine: no element provided to x-anchor...." on load. Any help on this is appreciated. Popover code

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

     <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">
                     <label class="flex items-center px-3 py-2 gap-2 cursor-pointer hover:bg-gray-100">
                         <input value=""  type="checkbox" class="rounded border-gray-300">
                         <div class="text-sm text-gray-800">Name</div>
                     </label>
             </div>
      </x-popover.panel>
</x-popover>

popover files

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

// x-popover.close
div x-on:click="$popover.close()">
    {{ $slot }}
</div>

// x-popover.index
<div x-data x-popover class="relative" {{ $attributes }}>
    {{ $slot }}
</div>

// x-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>

console error

Uncaught Alpine: no element provided to x-anchor...

LaryAI

2 years ago

Best Answer

Level 58

It seems like the issue is related to the x-anchor directive in your x-panel component. The x-anchor directive is used by Alpine.js to position floating elements like popovers or dropdowns relative to another element. The error message "Uncaught Alpine: no element provided to x-anchor..." indicates that Alpine.js is expecting an element to anchor the popover to, but it's not receiving one.

To fix this issue, you need to ensure that the element you want to anchor the popover to has an id that matches the one you're referencing in the x-anchor directive. In your x-popover.button component, you should add an id attribute that you can reference in the x-panel component.

Here's how you can modify your code:

Add an id to your x-popover.button component:

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

Update the x-anchor directive in your x-panel component to reference the id of the button:

<!-- x-panel -->
@props(['position' => 'bottom-center'])

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

Make sure that the id you use is unique on the page to avoid conflicts with other elements. If you have multiple popovers, you'll need to dynamically generate unique ids for each button and reference them accordingly in the x-anchor directive.

After making these changes, the popover should be correctly anchored to the button, and clicking the button should open the popover as expected. If you still encounter issues, double-check that you have included Alpine.js in your project and that it is initialized correctly.

Rretzko

2 years ago

Level 15

@LaryAI That worked but the button does not close when clicked.

Please or to participate in this conversation.