[Bug]: Cannot close menu/dropdown by clicking iframe

[horans]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.4.0

What browser are you using?

Chrome v92

Reproduction repository

https://headlessui.dev/vue/menu

Describe your issue

When a menu/dropdown is open, it cannot be closed by interacting(click) with iframe on the page.

Reproduction:

1. Click left top react/vue menu to open
2. Click right preview area (which is a iframe)

Expecting: close/blur menu
Result: menu stay as open/focus

Reference: https://gist.github.com/jaydson/1780598

[biesbjerg]

Maybe this can help someone, until a proper fix is implemented:

<template>
  <Listbox>
    <ListboxOptions ref="optionsRef">...</ListboxOptions>
  </Listbox>
</template>

<script lang="ts">
export default defineComponent({
  setup() {
    const optionsRef = ref<typeof ListboxOptions>();

    const closeOnIframeClick = async () => {
      const activeElement = document.activeElement as HTMLElement | null;
      if (activeElement instanceof HTMLIFrameElement) {
        optionsRef.value?.el?.dispatchEvent(
          new KeyboardEvent("keydown", {
            key: "Escape"
          })
        );

        await nextTick();

        const ownerActiveElement = activeElement.ownerDocument.activeElement as HTMLElement | null;
        if (ownerActiveElement) {
          ownerActiveElement.blur?.();
        }
      }
    };

    onMounted(() => {
      window.addEventListener("blur", closeOnIframeClick);
    });

    onUnmounted(() => {
      window.removeEventListener("blur", closeOnIframeClick);
    });

    return {
      optionsRef
    };
  }
});
</script>

[thecrypticace]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed by #1552, and will be available in the next release.

You can already try it using npm install @headlessui/vue@insiders.