NcListItem lost a href with update to 7.8.1+

[nickvergessen]

This is actually a breaking change:
nextcloud/spreed#9153

NcListItem entries like Talk's conversations in the left sidebar lost their a href and can therefore no longer be opened in a new tab with the mouse wheel, ctrl + click or right-click option, instead of the home page of talk or current conversation is loaded again with a trailing #

Before	After
Bildschirmaufzeichnung vom 2023-03-23, 20-53-01.webm	Bildschirmaufzeichnung vom 2023-03-23, 20-51-35.webm

Is that fixable without a revert of #3775 ?

[nickvergessen]

cc @raimund-schluessler @Chartman123 @ShGKme

[raimund-schluessler]

That was not intended and I think it should be fixable without reverting. Could you maybe guide me to the place where this is used in Talk?

[nickvergessen]

Install Talk master or stable26, and then hover entries in the left sidebar (as per before after videos?

[nickvergessen]

(observe the target URL in the bottom left)

[ShGKme]

Seems like the problem is here. It should use href in line 212 from RouterLink slotProps (203), not from the component prop.

https://github.com/nextcloud/nextcloud-vue/blob/4690b32d23a451c8a67d711c8066b191008f2050/src/components/NcListItem/NcListItem.vue#L202-L212

[raimund-schluessler]

Install Talk master or stable26, and then hover entries in the left sidebar (as per before after videos?

I meant the code in Talk, I suppose it's this 🙂
https://github.com/nextcloud/spreed/blob/fc72eb92f50fd0983dd12e0498bd37063b453796/src/components/LeftSidebar/ConversationsList/Conversation.vue#L23-L33

[nickvergessen]

Sorry, yes that's it

[ShGKme]

Usage in the Talk is correct. It passes to prop as intended. The problem is that currently NcListItem ignores the link generated by RouterLink on to prop while setting <a href.

As the result the link is not correct, though it navigate by the click handler.

I can fix it, but in an hour...

[raimund-schluessler]

Seems like the problem is here. It should use href in line 212 from RouterLink slotProps, not from component only props.

https://github.com/nextcloud/nextcloud-vue/blob/4690b32d23a451c8a67d711c8066b191008f2050/src/components/NcListItem/NcListItem.vue#L202-L212

It wasn't like this before #3775 either. It always used the href prop. I am honestly a bit puzzled why talk ever showed a link there.

[ShGKme]

It wasn't like this before #3775 either. It always used the href prop. I am honestly a bit puzzled why talk ever showed a link there.

Because it is literally a link. It works as a link (it navigates), it renders as a link (<a> element).

[ShGKme]

Anyway, NcListItem should not render a link that navigates not to its href.

[raimund-schluessler]

But router-link rendered as a li and the a within got its href from the prop provided. How was the href of the a ever correct?

[ShGKme]

But router-link rendered as a li and the a within got its href from the prop provided. How was the href of the a ever correct?

RounterLink searches a elements in slot content:

https://github.com/vuejs/vue-router/blob/3d026ea14f8f8fd93da73889d2bcd2103d44bec7/src/components/link.js#L151-L180

[raimund-schluessler]

But router-link rendered as a li and the a within got its href from the prop provided. How was the href of the a ever correct?

RounterLink searches a elements in slot content:

https://github.com/vuejs/vue-router/blob/3d026ea14f8f8fd93da73889d2bcd2103d44bec7/src/components/link.js#L151-L180

Ah, interesting I didn't know that. I am on a fix and currently test it with talk.

[raimund-schluessler]

Fix is in #3922.