fix(NcPopover): component crash when unmounted shown

[Antreesy]

☑️ Resolves

getPopoverContentElement() can be undefined, so it should not fail when trying to add a listener

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

[ShGKme]

getPopoverContentElement() can be undefined

Is it expected? Why?

[Antreesy]

Is it expected? Why?

I haven't checked, but probably cause it's a ref. Didn't you add it yourself? 👀

[susnux]

so it should not fail when trying to add a listener

when is this the case? We had the same discussion when I added the optional chaining operator:
#6802 (comment)

[susnux]

And from the code I do not see where this can ever be undefined in those event listeners

[Antreesy]

Currently happening, when there is an error while closing popover. Maybe it's redundant, but nevertheless - we can put it in one place and skip in another two

[ShGKme]

I haven't checked, but probably cause it's a ref. Didn't you add it yourself? 👀

When it's undefined, afterShow and afterHide events are not triggered.

If undefined is expected here, then the component triggers no afterShow/afterHide event in a specific case. Then it's interesting, what is the case. E.g., this behavior should be documented.

If undefined is not expected here, then something goes wrong, and we need to fix it. By adding ?. we hide an issue caused by another issue.

[ShGKme]

Could you confirm, that undefined is expected here and it's fine to not emit the events?
Best with a comment in the code explaining the case (it seems non-obious to me)

[Antreesy]

1. Adjust NcPopover rendering logic
   1.1 Click should cause v-if condition to render a popover to change, and it's unmounted before apply-hide
2. See result:

P.S. deferring unmount with nextTick also works, but I don't think it's the best way to control it

[Antreesy]

See reproduction details cc @susnux @ShGKme

Details

WIP error a <NcButton> as a trigger:

<template>
	<div style="display: flex">
		<NcButton @click="mountPopover = !mountPopover">Mount-unmount</NcButton>
		<NcPopover v-if="mountPopover" popup-role="dialog">
			<template #trigger>
				<NcButton>I am the trigger</NcButton>
			</template>
			<template #default>
				<form tabindex="0" role="dialog" aria-labelledby="popover-example-dialog-header-1" @submit.prevent>
					<h2 id="popover-example-dialog-header-1">this is some content</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>
						Vestibulum eget placerat velit.
					</p>
					<label>
						Label element
						<input type="text" placeholder="input element"/>
					</label>
				</form>
				<NcButton @click="mountPopover = !mountPopover">Mount-unmount</NcButton>
			</template>
		</NcPopover>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				mountPopover: false,
			}
		},
	}
</script>

[ShGKme]

For the history: Vue 3 sets template ref to null before starting the unmounting, including beforeUnmount event.

https://github.com/vuejs/core/blob/v3.5.17/packages/runtime-core/src/renderer.ts#L2110