menu-with-popper.vue example breaks in 1.5

[kjellmf]

Hi. I have used the excellent example https://github.com/tailwindlabs/headlessui/blob/main/packages/playground-vue/src/components/menu/menu-with-popper.vue to implement a simple split button. After I updated to headlessui/vue 1.5.0 the example is no longer working. It seems that popper is not initialized and the dropdown items are placed incorrectly. Anyone else experienced the same issue after upgrade?

[kjellmf]

I have done some more debugging and found a workaround.

Here is the original example that does not work in headlesssui 1.5:

<template>
  <div class="flex h-full w-screen justify-center bg-gray-50 p-12">
    <div class="mt-64 inline-block text-left">
      <Menu>
        <span class="inline-flex rounded-md shadow-sm">
          <!-- ******* Bug? ****** -->
          <MenuButton
            ref="trigger"
            class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800"
          >
            <span>Options</span>
            <svg class="ml-2 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path
                fillRule="evenodd"
                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                clipRule="evenodd"
              />
            </svg>
          </MenuButton>
        </span>

        <teleport to="body">
          <!-- ******* Bug? ****** -->
          <MenuItems
            ref="container"
            class="absolute right-0 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none"
          >
            <div class="px-4 py-3">
              <p class="text-sm leading-5">Signed in as</p>
              <p class="truncate text-sm font-medium leading-5 text-gray-900">tom@example.com</p>
            </div>

            <div class="py-1">
              <MenuItem as="a" href="#account-settings" :className="resolveClass">
                Account settings
              </MenuItem>
              <MenuItem v-slot="data">
                <a href="#support" :class="resolveClass(data)">Support</a>
              </MenuItem>
              <MenuItem as="a" disabled href="#new-feature" :className="resolveClass">
                New feature (soon)
              </MenuItem>
              <MenuItem as="a" href="#license" :className="resolveClass">License</MenuItem>
            </div>
            <div class="py-1">
              <MenuItem as="a" href="#sign-out" :className="resolveClass">Sign out</MenuItem>
            </div>
          </MenuItems>
        </teleport>
      </Menu>
    </div>
  </div>
</template>

<script>
import { defineComponent, h, ref, onMounted, watchEffect, watch } from 'vue'
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
import { usePopper } from '../../playground-utils/hooks/use-popper'
function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}
export default {
  components: { Menu, MenuButton, MenuItems, MenuItem },
  setup(props, context) {
    let [trigger, container] = usePopper({
      placement: 'bottom-end',
      strategy: 'fixed',
      modifiers: [{ name: 'offset', options: { offset: [0, 10] } }],
    })
    function resolveClass({ active, disabled }) {
      return classNames(
        'flex justify-between w-full px-4 py-2 text-sm leading-5 text-left',
        active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
        disabled && 'cursor-not-allowed opacity-50'
      )
    }
    return {
      trigger,
      container,
      resolveClass,
    }
  },
}
</script>

The problem is that the component refs trigger and container on the MenuButton and MenuItems are not initialized properly in the usePopper composable. A possible workaround is to move the refs from MenuButton and MenuItems like this:

<template>
  <div class="flex h-full w-screen justify-center bg-gray-50 p-12">
    <div class="mt-64 inline-block text-left">
      <Menu>
        <span class="inline-flex rounded-md shadow-sm" ref="trigger"><!-- Moved ref -->
          <MenuButton
            class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800"
          >
            <span>Options</span>
            <svg class="ml-2 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path
                fillRule="evenodd"
                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                clipRule="evenodd"
              />
            </svg>
          </MenuButton>
        </span>

        <teleport to="body">
          <MenuItems>
            <!-- Moved ref -->
            <div ref="container"
                 class="absolute right-0 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none">
              <div class="px-4 py-3">
                <p class="text-sm leading-5">Signed in as</p>
                <p class="truncate text-sm font-medium leading-5 text-gray-900">tom@example.com</p>
              </div>

              <div class="py-1">
                <MenuItem as="a" href="#account-settings" :className="resolveClass">
                  Account settings
                </MenuItem>
                <MenuItem v-slot="data">
                  <a href="#support" :class="resolveClass(data)">Support</a>
                </MenuItem>
                <MenuItem as="a" disabled href="#new-feature" :className="resolveClass">
                  New feature (soon)
                </MenuItem>
                <MenuItem as="a" href="#license" :className="resolveClass">License</MenuItem>
              </div>
              <div class="py-1">
                <MenuItem as="a" href="#sign-out" :className="resolveClass">Sign out</MenuItem>
              </div>
            </div>
          </MenuItems>

        </teleport>
      </Menu>
    </div>
  </div>
</template>

<script>
import { defineComponent, h, ref, onMounted, watchEffect, watch } from "vue";
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
import { usePopper } from "../../playground-utils/hooks/use-popper";

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

export default {
  components: { Menu, MenuButton, MenuItems, MenuItem },
  setup(props, context) {
    let [trigger, container] = usePopper({
      placement: "bottom-end",
      strategy: "fixed",
      modifiers: [{ name: "offset", options: { offset: [0, 10] } }]
    });

    function resolveClass({ active, disabled }) {
      return classNames(
        "flex justify-between w-full px-4 py-2 text-sm leading-5 text-left",
        active ? "bg-gray-100 text-gray-900" : "text-gray-700",
        disabled && "cursor-not-allowed opacity-50"
      );
    }

    return {
      trigger,
      container,
      resolveClass
    };
  }
};
</script>

Now the component works as expected. Not sure whats happening here.

[plmrlnsnts]

Hi there! I experienced the same error you mentioned. It looks like in order to access the actual html node in a headless ui (v1.5) component, you now have to use "$el" instead of just "el".

[plmrlnsnts]

I noticed you were using the use-popper.js from the official example, these are the lines that I am referring to:

headlessui/packages/playground-vue/src/playground-utils/hooks/use-popper.js

Lines 13 to 14 in 2414bbd

	let popperEl = popper.value.el || popper.value
	let referenceEl = reference.value.el || reference.value

[kjellmf]

Thanks! I noticed something similar while debugging the issue. I have tried using $el instead of el, but the example does still not work properly:

import { ref, onMounted, watchEffect } from 'vue'
import { createPopper } from '@popperjs/core'

export function usePopper(options) {
  let reference = ref(null)
  let popper = ref(null)

  onMounted(() => {
    watchEffect((onInvalidate) => {
      if (!popper.value) return
      if (!reference.value) return

      let popperEl = popper.value.$el || popper.value
      let referenceEl = reference.value.$el || reference.value

      if (!(referenceEl instanceof HTMLElement)) return
      if (!(popperEl instanceof HTMLElement)) return

      let { destroy } = createPopper(referenceEl, popperEl, options)

      onInvalidate(destroy)
    })
  })

  return [reference, popper]
}

When I step through the code it seems that popperEl is not initialized yet:

[kjellmf]

Looks like this has been resolved now. #1222