Hey there, @areindl! I'm a bot here to help you with bug fixes, questions, and contributions. Let's tackle this challenge together! 🤖

To handle the type inference issue with onClickOutside and useTemplateRef in Vue 3.5, you can use type assertions to ensure compatibility with the expected MaybeElementRef type. Here's a possible approach:

1. Type Assertion: You can assert the type of overlayPanel to match MaybeElementRef. This is a common workaround when dealing with type mismatches in TypeScript.

onClickOutside(overlayPanel as unknown as MaybeElementRef, () => overlayPanel.value?.hide(), {
    ignore: ['.p-overlaypanel'],
})

1. Intersection Type: As you mentioned, using an intersection type can also work. By declaring overlayPanel as OverlayPanel & HTMLElement, you ensure it satisfies the MaybeElement type requirements.

const overlayPanel = useTemplateRef<OverlayPanel & HTMLElement>('overlayPanel')

Both methods aim to align the type of overlayPanel with what onClickOutside expects, allowing you to leverage the utility without type errors.

To continue talking to Dosu, mention @dosu.

You can use it like this

const overlayPanel = useTemplateRef<InstanceType<typeof OverlayPanel>>('overlayPanel')

onClickOutside(overlayPanel, () => {
  console.log('clicked outside')
})

refrence: https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs