el-popover does not close when clicking outside

[bergwerf]

What component (if applicable)

• URL for category: https://tailwindcss.com/plus/ui-blocks/marketing/elements/headers
• Component name: Header

Describe the bug
I upgraded my code with Tailwind Plus Elements, and used el-popover and el-popover-group as shown in the example to replace Vue. Actually, I pasted the entire example into my code base (which is based on Astro) to test. The result works, except that the popover doesn't close when clicking outside of it. This does work in the demo. Since my page does not contain any additional JavaScript or CSS, and the Header component is duplicated exactly as in the example, I could not identify the difference causing this issue. How is el-popover supposed to close when clicking outside it?

Browser/Device (if applicable)

• OS: Debian
• Browser: Firefox
• Version: 140

[philipp-spiess]

Hey there! Could it be that you're missing the Tailwind Elements import? Try adding this to your page header:

<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>

See: https://tailwindcss.com/plus/ui-blocks/documentation/elements

[bergwerf]

Yes, I did include the import. The other interactions are working, just the click-outside the close isn't.

I am not sure what is breaking it, the following minimal demo worked for me:

<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>
<el-popover-group>
  <button popovertarget="menu">Open</button>
  <el-popover id="menu" anchor="bottom" popover>
    <div style="width: 20em; height: 20em; background: red;"></div>
  </el-popover>
</el-popover-group>

[bergwerf]

I found the culprit: Astro's build process converts popover to popover="true".

[bergwerf]

Fixed by setting popover="auto". Might be worth making this explicit in the Tailwind block library?