NcButton: icon-only button broken if using conditional template for text

[mejo-]

Conditionally setting the text slot in a NcButton breaks the icon-only version of the button:

<NcButton>
    <template #icon>
        <SomeIcon :size="20" />
    </template>
    <template v-if="!isMobile">
        {{ title }}
    </template>
</NcButton>

This leads to empty buttons (with neither icon nor text) in some cases.

Apparently the button component is not re-rendered when the v-if condition changes.

Maybe @vinicius73 can explain better what's the problem here :wink:

[raimund-schluessler]

My experience is that using $slots outside the template or outside a render() function is always a bit fragile (even though its attempted to be made reactive via the data object. And afaik it will fail quite badly for vue3.

So, ideally, the NcButton component (and all other components using this pattern) should be converted to a render function.

[raimund-schluessler]

@mejo- Could you please check if https://github.com/nextcloud/nextcloud-vue/pull/3726 fixes the issue for you?

[Chartman123]

Hi @raimund-schluessler

I faced a similar issue in Forms. Could you please have a look if this might be related to this issue here and perhaps needs another fix?