Vue: Using popover inside a TabPanel causes it to close when still clicking inside the content

[jfrense]

When using the Popover as a standalone component, if I click anywhere inside its content panel, the content window manages to stay open. However, when I have the popover component inside a tab panel component, clicking in the content window automatically closes the popover. Can you provide any insight into why the tabs component is causing the popover to change its functionality?

I am using the default popover example on the headlessui.dev website along with a simple added tab group component.

<script setup lang="ts">
import { ref } from 'vue'

import { ChevronDownIcon, CheckCircleIcon } from '@heroicons/vue/solid'


  import { Popover, PopoverButton, PopoverPanel, Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'


  const solutions = [
    {
      name: 'Insights',
      description: 'Measure actions your users take',
      href: '##',
      icon: `
        <svg
          width="48"
          height="48"
          viewBox="0 0 48 48"
          fill="none"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
        >
          <rect width="48" height="48" rx="8" fill="#FFEDD5" />
          <path
            d="M24 11L35.2583 17.5V30.5L24 37L12.7417 30.5V17.5L24 11Z"
            stroke="#FB923C"
            stroke-width="2"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M16.7417 19.8094V28.1906L24 32.3812L31.2584 28.1906V19.8094L24 15.6188L16.7417 19.8094Z"
            stroke="#FDBA74"
            stroke-width="2"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M20.7417 22.1196V25.882L24 27.7632L27.2584 25.882V22.1196L24 20.2384L20.7417 22.1196Z"
            stroke="#FDBA74"
            stroke-width="2"
          />
        </svg>
      `,
    },
    {
      name: 'Automations',
      description: 'Create your own targeted content',
      href: '##',
      icon: `
        <svg
          width="48"
          height="48"
          viewBox="0 0 48 48"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <rect width="48" height="48" rx="8" fill="#FFEDD5" />
          <path
            d="M28.0413 20L23.9998 13L19.9585 20M32.0828 27.0001L36.1242 34H28.0415M19.9585 34H11.8755L15.9171 27"
            stroke="#FB923C"
            stroke-width="2"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M18.804 30H29.1963L24.0001 21L18.804 30Z"
            stroke="#FDBA74"
            stroke-width="2"
          />
        </svg>
      `,
    },
    {
      name: 'Reports',
      description: 'Keep track of your growth',
      href: '##',
      icon: `
        <svg
          width="48"
          height="48"
          viewBox="0 0 48 48"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <rect width="48" height="48" rx="8" fill="#FFEDD5" />
          <rect x="13" y="32" width="2" height="4" fill="#FDBA74" />
          <rect x="17" y="28" width="2" height="8" fill="#FDBA74" />
          <rect x="21" y="24" width="2" height="12" fill="#FDBA74" />
          <rect x="25" y="20" width="2" height="16" fill="#FDBA74" />
          <rect x="29" y="16" width="2" height="20" fill="#FB923C" />
          <rect x="33" y="12" width="2" height="24" fill="#FB923C" />
        </svg>
      `,
    },
  ]

  const tabs = [
  { name: 'New'},
  { name: 'In Progress' },
  { name: 'Ready For Pick Up'},
  { name: 'Invoice'},
  { name: 'Archived' },

]


</script>



<template>

<TabGroup>
      <TabList class="-z-500 flex space-x-8 border-b border-gray-200 ">
           <Tab
          v-for="(tab, index) in tabs"
          as="div"
          :key="index"
         
          v-slot="{ selected }"
        >
      
      <button :class="[selected ? 'border-green-500 text-green-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-200', 'cursor-pointer whitespace-nowrap flex py-4 px-1 border-b-2 font-medium text-sm']" :aria-current="selected ? 'page' : undefined">
            {{ tab.name }}
          </button>
         

        </Tab>

      </TabList>
       <TabPanels
      
      >
      <TabPanel>
  <Popover v-slot="{ open }" class="relative">
        <PopoverButton
          :class="open ? '' : 'text-opacity-90'"
          class="inline-flex items-center px-3 py-2 text-base font-medium text-white bg-orange-700 rounded-md group hover:text-opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
        >
          <span>Solutions</span>
          <ChevronDownIcon
            :class="open ? '' : 'text-opacity-70'"
            class="w-5 h-5 ml-2 text-orange-300 transition duration-150 ease-in-out group-hover:text-opacity-80"
            aria-hidden="true"
          />
        </PopoverButton>
  
        <transition
          enter-active-class="transition duration-200 ease-out"
          enter-from-class="translate-y-1 opacity-0"
          enter-to-class="translate-y-0 opacity-100"
          leave-active-class="transition duration-150 ease-in"
          leave-from-class="translate-y-0 opacity-100"
          leave-to-class="translate-y-1 opacity-0"
        >
          <PopoverPanel
            class="absolute z-10 w-screen max-w-sm px-4 mt-3 transform -translate-x-1 right-1/2 sm:px-0 lg:max-w-3xl"
          >
            <div
              class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
            >
              <div class="relative grid gap-8 bg-white p-7 lg:grid-cols-2">
                <a
                  v-for="item in solutions"
                  :key="item.name"
                  :href="item.href"
                  class="flex items-center p-2 -m-3 transition duration-150 ease-in-out rounded-lg hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
                >
                  <div
                    class="flex items-center justify-center flex-shrink-0 w-10 h-10 text-white sm:h-12 sm:w-12"
                  >
                    <div v-html="item.icon"></div>
                  </div>
                  <div class="ml-4">
                    <p class="text-sm font-medium text-gray-900">
                      {{ item.name }}
                    </p>
                    <p class="text-sm text-gray-500">
                      {{ item.description }}
                    </p>
                  </div>
                </a>
              </div>
              <div class="p-4 bg-gray-50">
                <a
                  href="##"
                  class="flow-root px-2 py-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
                >
                  <span class="flex items-center">
                    <span class="text-sm font-medium text-gray-900">
                      Documentation
                    </span>
                  </span>
                  <span class="block text-sm text-gray-500">
                    Start integrating products and tools
                  </span>
                </a>
              </div>
            </div>
          </PopoverPanel>
        </transition>
      </Popover>
</TabPanel>
</TabPanels>
</TabGroup>


</template>

[thebrengun]

I'm encountering the same issue with the react package. I made a codesandbox where the behavior can be reproduced. The behavior is worst in Safari where even the button cannot be clicked. In Chrome the button can be clicked but the text cannot be selected. (Mac 12.3, Chrome 100.0.4896.127, Safari Version 15.4 (17613.1.17.1.13))

I'm guessing this has something to do with the tab panel capture focus or focusCapture events that bubble. Or maybe Tab is not using the React events to track the focus but attaching its own listeners...

Has anyone else found a workaround for this?

[thebrengun]

I was able to simplify my case a bit. This will happen whenever popover is inside a focusable element (which Tab.Panel is). I think it's here in the PopoverRoot that whenever the activeElement is outside of the group the panel is closed:

headlessui/packages/@headlessui-react/src/components/popover/popover.tsx

Lines 200 to 226 in 807ae66

	let groupContext = usePopoverGroupContext()
	let registerPopover = groupContext?.registerPopover
	let isFocusWithinPopoverGroup = useCallback(() => {
	return (
	groupContext?.isFocusWithinPopoverGroup() ??
	(ownerDocument?.activeElement &&
	(button?.contains(ownerDocument.activeElement) ||
	panel?.contains(ownerDocument.activeElement)))
	)
	}, [groupContext, button, panel])
	useEffect(() => registerPopover?.(registerBag), [registerPopover, registerBag])
	// Handle focus out
	useEventListener(
	ownerDocument?.defaultView,
	'focus',
	() => {
	if (popoverState !== PopoverStates.Open) return
	if (isFocusWithinPopoverGroup()) return
	if (!button) return
	if (!panel) return
	dispatch({ type: ActionTypes.ClosePopover })
	},
	true
	)

If the Popover is inside an element with tabindex="0" then that element will be the activeElement and the panel will be closed. I updated the codesandbox reproduction to demo this without using Tab and also propose a workaround but I'm not sure if it's an appropriate solution or not.

The workaround appears to be just adding tabIndex="0" to the Popover.Panel so that it is the activeElement. Is there a reason this shouldn't be done or could cause other unexpected behavior?