UserBubble is empty in v4.1.0

[julien-nc]

UserBubble is now rendered as an empty div (the wrapper):

<div data-v-5c0e21af="" data-v-ae66bf1a="" trigger="hover focus" class="user-bubble__wrapper"> </div>

which means the Popover trigger slot is not rendered anymore.

@raimund-schluessler This bug was introduced in #2160 (8228b6e). I tried to revert src/components/UserBubble/UserBubble.vue like it was before this commit and it works fine.

I didn't investigate further what's problematic in this commit. Maybe this syntax change is not strictly equivalent as before and some attributes are not visible inside the <template> tag.

[raimund-schluessler]

Hm, it seems that this only happens when the default slot is empty. I.e. this renders something:

<UserBubble
	:margin="4"
	:size="30"
	display-name="Administrator"
	user="admin">
	Test stuff text
	<template #title>
		<a href="#"
			title="Remove user"
			class="icon-close"
			@click="alert" />
	</template>
</UserBubble>

whereas this does not:

<UserBubble
	:margin="4"
	:size="30"
	display-name="Administrator"
	user="admin">
	<template #title>
		<a href="#"
			title="Remove user"
			class="icon-close"
			@click="alert" />
	</template>
</UserBubble>

@eneiluj Can you confirm this?

[julien-nc]

@raimund-schluessler yes I confirm. I tested even without the #title template. This renders well:

<UserBubble
	:user="approver.type === 'user' ? approver.entityId : undefined"
	:display-name="approver.displayName"
	:avatar-image="avatarImageClass"
	:size="24">
	blabla
</UserBubble>

and this does not:

<UserBubble
	:user="approver.type === 'user' ? approver.entityId : undefined"
	:display-name="approver.displayName"
	:avatar-image="avatarImageClass"
	:size="24" />

[raimund-schluessler]

What did the UserBuble component render before the changes in 8228b6e when you let the default slot empty? It might be an issue with the VPopover component which was kind of hidden by the different syntax used before.

[julien-nc]

You mean what did it render exactly? I can paste a full dom element if you want.
But approximately it rendered the bubble without any popover 😁

[raimund-schluessler]

Well, the bubble is the popover (or more specifically, the trigger of the popover). That's maybe the issue here.

[nickvergessen]

This also breaks the notifications with the nextcloud-vue version 4.1 or later.

[nickvergessen]

DOM with 4.0.3

<div data-v-6da16f10="" data-v-30428f72="" class="mention rich-text--component" attrs="[object Object]" key="h-2">
	<div data-v-28b47c60="" data-v-6da16f10="" trigger="hover focus" class="user-bubble__wrapper">
		<div data-v-28b47c60="" slot="trigger" class="user-bubble__content" style="height: 20px; line-height: 20px; border-radius: 10px;">
			<div data-v-e1bb6d38="" data-v-28b47c60="" tabindex="-1" aria-label="Avatar of Bennet Bernetto" role="" class="avatardiv popovermenu-wrapper user-bubble__avatar" style="--size: 16px; line-height: 16px; font-size: 9px; margin-left: 2px;" margin="2">
				<img data-v-e1bb6d38="" src="/index.php/avatar/d4a24b89-fb28-44c8-be16-7bdce9cd02af/16" srcset="/index.php/avatar/d4a24b89-fb28-44c8-be16-7bdce9cd02af/16 1x, /index.php/avatar/d4a24b89-fb28-44c8-be16-7bdce9cd02af/32 2x, /index.php/avatar/d4a24b89-fb28-44c8-be16-7bdce9cd02af/64 4x" alt=""> 
				<!----> 
				<!----> 
				<!---->
			</div> 
			<span data-v-28b47c60="" class="user-bubble__title">
				Bennet Bernetto
			</span>
			<!---->
		</div>
	</div>
</div>

DOM with 4.1.0:

<div data-v-6da16f10="" data-v-30428f72="" class="mention rich-text--component" attrs="[object Object]" key="h-2">
	<div data-v-1602ea3f="" data-v-6da16f10="" trigger="hover focus" class="user-bubble__wrapper"> </div>
</div>

[julien-nc]

@raimund-schluessler We could revert changes made to src/components/UserBubble/UserBubble.vue in #2160 (8228b6e) as a temporary fix. Then you would have plenty of time to think about how to tackle this new slot syntax issue 😁.

[nickvergessen]

It reminds me of nextcloud/spreed#2435

Where we moved to the new syntax in nextcloud/spreed#2424 but had to revert some, as they didn't work with the new syntax for whatever reason. I think it's the same problem here.

[raimund-schluessler]

@raimund-schluessler We could revert changes made to src/components/UserBubble/UserBubble.vue in #2160 (8228b6e) as a temporary fix. Then you would have plenty of time to think about how to tackle this new slot syntax issue 😁.

Fine with me.

[raimund-schluessler]

I now understand what the problem is. If the default slot is empty, we don't use a Popover component, but a simple div:
https://github.com/nextcloud/nextcloud-vue/blob/16cf329d4c8d8b4ad99fcc4b811c624f121ce0e4/src/components/UserBubble/UserBubble.vue#L203-L207

A simple div obviously has no #trigger slot and since it is wrapped in a template now, it simply does not show at all. Before we had a div directly in the markup, which would also render in a div.