Buttons inside Popovers are not clickable in Safari

[mvllow]

I am unable to click items inside of a popover when using safari. Brave seems to work just fine. I've tried using the below code as well as <PopoverPanel static> manually controlling the open state to no luck.

<script>
  import {
    Popover,
    PopoverButton,
    PopoverPanel,
  } from '@rgossiaux/svelte-headlessui'
</script>

<Popover>
  <PopoverButton>open popover</PopoverButton>
  <PopoverPanel>
    <button on:click={() => console.log('button clicked')}>button</button>
  </PopoverPanel>
</Popover>

Tested in a fresh skeleton sveltekit app. Tabbing through the items and hitting enter does work. Clicking, however, causes the panel to disappear before firing any events.

Doing the same test using a fresh vite + vue app and the official @headlessui/vue popover works as expected (including in safari):

<template>
  <Popover>
    <PopoverButton>open popover</PopoverButton>

    <PopoverPanel>
      <button @click="handleClick">button</button>
    </PopoverPanel>
  </Popover>
</template>

<script setup>
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";

function handleClick() {
  console.log("button clicked");
}
</script>

[rgossiaux]

Your snippet actually works correctly for me in a fresh repo, the console.log statements run whenever I click on the button (and the popover does not close). Did you share the right snippet? If so, can you share a repo where this is broken?

[mvllow]

Oh shoot, I forgot an important detail – this seems to only happen in safari. Apologies!

I am on macOS 12.2 beta

[rgossiaux]

Interesting, thanks for the report. I can reproduce this as well now. Looks like this is ultimately down to a browser difference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus

Not sure yet why this is a bug in the Svelte version but not the React/Vue versions; that needs some more digging (there's nothing obvious in the Popover code that I see). If I can find that out I will try to port that fix back here & otherwise can add some custom logic myself.

I'm pretty busy for the next week so I might not get to this until next week, as a heads up.

[rgossiaux]

This stumped me for a while because I was trying to understand what special thing Headless UI was doing to handle this case...but actually I finally realized that it's because SvelteKit is doing something bad that causes this bug (and #39 ).

Now that I understand why it's happening, I'm going to add a workaround.