diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue index da831881d..7450ba18a 100644 --- a/src/components/Properties/PropertyGroups.vue +++ b/src/components/Properties/PropertyGroups.vue @@ -34,14 +34,13 @@ <!-- multiselect taggable groups --> <div class="property__value"> - <NcSelect v-if="!showAsText" + <NcSelect v-if="!isReadOnly" v-model="localValue" :options="groups" :no-wrap="true" :placeholder="t('contacts', 'Add contact in group')" :multiple="true" :close-on-select="false" - :disabled="isReadOnly" :clearable="true" :deselect-from-dropdown="true" :taggable="true" @@ -55,9 +54,15 @@ {{ t('contacts', 'No results') }} </span> </NcSelect> - <p v-else> - {{ localValue.length === 0 ? t('contacts','None'): localValue.toString() }} - </p> + <div v-else> + <span v-if="localValue.length === 0">{{ t('contacts','None') }}</span> + + <div class="group__list"> + <span v-for="(group, index) in localValue"> + {{ group }}{{ index === (localValue.length - 1) ? '' : ', ' }} + </span> + </div> + </div> </div> <!-- empty actions to keep the layout --> @@ -159,3 +164,10 @@ export default { }, } </script> + +<style lang="scss" scoped> +.group__list { + display: flex; + flex-wrap: wrap; +} +</style>