From 7635423f52ed23f7b58dabd3d69d857693f600bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 8 Feb 2024 10:12:57 +0100
Subject: [PATCH] fix: Adapt to new nextcloud vue version
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
(cherry picked from commit e1de6d317b842e7e5ef4f3e89a08b17372f2f776)
---
 cypress/e2e/cardFeatures.js                   | 33 +++----
 cypress/e2e/sharingFeatures.js                |  3 +
 cypress/support/commands.js                   |  9 +-
 src/App.vue                                   |  4 +-
 src/CardMoveDialog.vue                        | 31 +++---
 src/CardSelector.vue                          | 12 +--
 src/components/ActivityEntry.vue              |  2 +-
 src/components/AttachmentDragAndDrop.vue      |  2 +-
 src/components/Controls.vue                   |  8 +-
 src/components/board/BoardSidebar.vue         |  2 +-
 src/components/board/SharingTabSidebar.vue    | 18 ++--
 src/components/card/AssignmentSelector.vue    | 25 ++---
 src/components/card/CardSidebar.vue           |  2 +-
 src/components/card/CardSidebarTabDetails.vue |  3 +-
 src/components/card/DueDateSelector.vue       |  2 +-
 src/components/card/TagSelector.vue           | 50 +++++-----
 src/components/cards/AvatarList.vue           | 96 ++++++++++++-------
 src/components/cards/CardItem.vue             |  2 +-
 src/components/cards/badges/DueDate.vue       |  2 +-
 src/components/navigation/AppNavigation.vue   | 12 +--
 .../navigation/AppNavigationAddBoard.vue      |  2 +-
 .../navigation/AppNavigationBoard.vue         | 19 ++--
 .../navigation/AppNavigationBoardCategory.vue |  2 +-
 src/directives/focus.js                       | 22 +++++
 src/init-reference.js                         | 48 ++++++----
 src/views/CreateNewCardCustomPicker.vue       | 28 +++---
 26 files changed, 252 insertions(+), 187 deletions(-)
 create mode 100644 src/directives/focus.js

diff --git a/cypress/e2e/cardFeatures.js b/cypress/e2e/cardFeatures.js
index 60344ec05..8817b0b56 100644
--- a/cypress/e2e/cardFeatures.js
+++ b/cypress/e2e/cardFeatures.js
@@ -69,11 +69,13 @@ describe('Card', function() {
 			.first().click()
 		cy.get('.modal-mask.card-selector .card-title').should('be.visible').click().type(newCardTitle)
 		cy.get('.modal-mask.card-selector .multiselect-board').should('be.visible').click()
-		cy.get('.modal-mask.card-selector .multiselect-board li:contains("' + boardData.title + '")').should('be.visible').click()
+		cy.get('.vs__dropdown-menu [data-cy="board-select-title"]:contains("' + boardData.title + '")').should('be.visible').click()
+
 		cy.wait('@getBoard', { timeout: 7000 })
 
 		cy.get('.modal-mask.card-selector .multiselect-list').should('be.visible').click()
-		cy.get('.modal-mask.card-selector .multiselect-list li').eq(0).should('be.visible').click()
+		cy.get('.vs__dropdown-menu span[title="TestList"]').should('be.visible').click()
+
 		cy.get('.modal-mask.card-selector button.button-vue--vue-primary').should('be.visible').click()
 		cy.wait('@save', { timeout: 7000 })
 
@@ -101,13 +103,13 @@ describe('Card', function() {
 			})
 
 			cy.get('.modal__card').should('be.visible')
-			cy.get('.app-sidebar-header__maintitle').contains('Hello world')
+			cy.get('.app-sidebar-header__mainname').contains('Hello world')
 		})
 
 		it('Attachment from files app', () => {
 			cy.get('.card:contains("Hello world")').should('be.visible').click()
 			cy.get('.modal__card').should('be.visible')
-			cy.get('.app-sidebar-tabs__tab [data-id="attachments"]').click()
+			cy.get('#tab-button-attachments').click()
 			cy.get('button.icon-upload').should('be.visible')
 			cy.get('button.icon-folder').should('be.visible')
 				.click()
@@ -118,11 +120,11 @@ describe('Card', function() {
 			cy.get('.attachment-list .basename').contains('welcome.txt')
 		})
 
-		it('Shows the modal with the editor', () => {
+		it.only('Shows the modal with the editor', () => {
 			cy.get('.card:contains("Hello world")').should('be.visible').click()
 			cy.intercept({ method: 'PUT', url: '**/apps/deck/cards/*' }).as('save')
 			cy.get('.modal__card').should('be.visible')
-			cy.get('.app-sidebar-header__maintitle').contains('Hello world')
+			cy.get('.app-sidebar-header__mainname').contains('Hello world')
 			cy.get('.modal__card .ProseMirror h1').contains('Hello world').should('be.visible')
 			cy.get('.modal__card .ProseMirror h1')
 				.click()
@@ -229,20 +231,13 @@ describe('Card', function() {
 			cy.get(`.card:contains("${newCardTitle}")`).should('be.visible').click()
 
 			cy.get('#app-sidebar-vue [data-test="tag-selector"]').should('be.visible').click()
-			cy.get('.multiselect__option:contains("Action needed")').should('be.visible').click()
+			cy.get('.vs__dropdown-menu .tag:contains("Action needed")').should('be.visible').click()
+			cy.get('.vs__selected .tag:contains("Action needed")').should('be.visible')
+			cy.get('.vs__dropdown-menu .tag:contains("Later")').should('be.visible').click()
 
-			cy.get('[data-test="tag-selector"] .selector-wrapper--icon').click()
-			cy.get('.multiselect__option:contains("Action needed")').should('not.be.visible')
-
-			cy.get('[data-test="tag-selector"] .multiselect__tags .tag:contains("Action needed")')
-				.should('be.visible')
-
-			cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Action needed")')
-				.should('be.visible')
-
-			cy.get('#app-sidebar-vue [data-test="tag-selector"]').should('be.visible').click()
-			cy.get('.multiselect__option:contains("Later")').should('be.visible').click()
-			cy.get('.multiselect__option:contains("Action needed")').should('be.visible').click()
+			cy.get('.vs__selected .tag:contains("Action needed")').should('be.visible')
+			cy.get('.vs__selected .tag:contains("Action needed")')
+				.parent().find('button').click()
 
 			cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Later")')
 				.should('be.visible')
diff --git a/cypress/e2e/sharingFeatures.js b/cypress/e2e/sharingFeatures.js
index 634af242b..f5da482e1 100644
--- a/cypress/e2e/sharingFeatures.js
+++ b/cypress/e2e/sharingFeatures.js
@@ -38,7 +38,10 @@ describe('Board', function() {
 			cy.get('.board-title').contains(board.title)
 
 			cy.shareBoardWithUi(recipient.userId)
+
+			cy.intercept({ method: 'PUT', url: '**/apps/deck/boards/*/acl/*' }).as('setAcl')
 			cy.get(`[data-cy="acl-participant:${recipient.userId}"]`).find('[data-cy="action:permission-edit"]').click()
+			cy.wait('@setAcl')
 
 			cy.login(recipient)
 			cy.visit(`/apps/deck/#/board/${boardId}`)
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 8001cbed8..dbef64203 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -107,11 +107,14 @@ Cypress.Commands.add('getNavigationEntry', (boardTitle) => {
 })
 
 Cypress.Commands.add('shareBoardWithUi', (userId) => {
+	cy.intercept({ method: 'GET', url: `**/ocs/v2.php/apps/files_sharing/api/v1/sharees?search=${userId}*` }).as('fetchRecipients')
 	cy.get('[aria-label="Open details"]').click()
 	cy.get('.app-sidebar').should('be.visible')
-	cy.get('.multiselect__input').type(`${userId}`)
-	cy.get('.multiselect__content .multiselect__element').first().contains(userId)
-	cy.get('.multiselect__input').type('{enter}')
+	cy.get('.select input').type(`${userId}`)
+	cy.wait('@fetchRecipients', { timeout: 7000 })
+
+	cy.get('.vs__dropdown-menu .option').first().contains(userId)
+	cy.get('.select input').type('{enter}')
 
 	cy.get('.shareWithList').contains(userId)
 })
diff --git a/src/App.vue b/src/App.vue
index 029917875..0c4cb6693 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -200,11 +200,13 @@ export default {
 		background-image: url('../img/color_picker.svg');
 	}
 
-	.multiselect {
+	.v-select {
 		width: 100%;
 	}
 
 	.modal__card {
+		width: 100%;
+		min-width: 100%;
 		height: 100vh;
 		max-height: calc(100vh - 120px);
 		overflow: auto;
diff --git a/src/CardMoveDialog.vue b/src/CardMoveDialog.vue
index 286cea6cc..0b978ec7d 100644
--- a/src/CardMoveDialog.vue
+++ b/src/CardMoveDialog.vue
@@ -2,21 +2,20 @@
 	<NcModal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
 		<div class="modal__content">
 			<h3>{{ t('deck', 'Move card to another board') }}</h3>
-			<NcMultiselect v-model="selectedBoard"
+			<NcSelect v-model="selectedBoard"
+				:input-label="t('deck', 'Select a board')"
 				:placeholder="t('deck', 'Select a board')"
 				:options="activeBoards"
 				:max-height="100"
 				label="title"
-				@select="loadStacksFromBoard" />
-			<NcMultiselect v-model="selectedStack"
-				:placeholder="t('deck', 'Select a list')"
+				@option:selected="loadStacksFromBoard" />
+			<NcSelect v-model="selectedStack"
+				:disabled="stacksFromBoard.length === 0"
+				:placeholder="stacksFromBoard.length === 0 ? t('deck', 'No lists available') : t('deck', 'Select a list')"
+				:input-label="t('deck', 'Select a list')"
 				:options="stacksFromBoard"
 				:max-height="100"
-				label="title">
-				<span slot="noOptions">
-					{{ t('deck', 'List is empty') }}
-				</span>
-			</NcMultiselect>
+				label="title" />
 
 			<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
 				{{ t('deck', 'Move card') }}
@@ -29,14 +28,14 @@
 </template>
 
 <script>
-import { NcModal, NcMultiselect } from '@nextcloud/vue'
+import { NcModal, NcSelect } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 export default {
 	name: 'CardMoveDialog',
-	components: { NcModal, NcMultiselect },
+	components: { NcModal, NcSelect },
 	data() {
 		return {
 			card: null,
@@ -92,11 +91,15 @@ export default {
 	width: 25vw;
 	min-width: 250px;
 	min-height: 120px;
-	text-align: center;
 	margin: 20px 20px 100px 20px;
 
-	.multiselect {
-		margin-bottom: 10px;
+	h3 {
+		font-weight: bold;
+		text-align: center;
+	}
+
+	.select {
+		margin-bottom: 12px;
 	}
 }
 
diff --git a/src/CardSelector.vue b/src/CardSelector.vue
index 95a0a0734..4fe5d7a42 100644
--- a/src/CardSelector.vue
+++ b/src/CardSelector.vue
@@ -24,12 +24,12 @@
 	<NcModal class="card-selector" @close="close">
 		<div id="modal-inner" :class="{ 'icon-loading': loading }">
 			<h3>{{ title }}</h3>
-			<NcMultiselect v-model="selectedBoard"
+			<NcSelect v-model="selectedBoard"
 				:placeholder="t('deck', 'Select a board')"
 				:options="boards"
 				:disabled="loading"
 				label="title"
-				@select="fetchCardsFromBoard">
+				@option:selected="fetchCardsFromBoard">
 				<template slot="singleLabel" slot-scope="props">
 					<span>
 						<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
@@ -42,9 +42,9 @@
 						<span>{{ props.option.title }}</span>
 					</span>
 				</template>
-			</NcMultiselect>
+			</NcSelect>
 
-			<NcMultiselect v-model="selectedCard"
+			<NcSelect v-model="selectedCard"
 				:placeholder="t('deck', 'Select a card')"
 				:options="cardsFromBoard"
 				:disabled="loading || selectedBoard === ''"
@@ -62,14 +62,14 @@
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import { NcModal, NcMultiselect } from '@nextcloud/vue'
+import { NcModal, NcSelect } from '@nextcloud/vue'
 import axios from '@nextcloud/axios'
 
 export default {
 	name: 'CardSelector',
 	components: {
 		NcModal,
-		NcMultiselect,
+		NcSelect,
 	},
 	props: {
 		title: {
diff --git a/src/components/ActivityEntry.vue b/src/components/ActivityEntry.vue
index 3c6ee6902..95c0d60de 100644
--- a/src/components/ActivityEntry.vue
+++ b/src/components/ActivityEntry.vue
@@ -25,7 +25,7 @@
 		<div class="activity--header">
 			<img :src="activity.icon" class="activity--icon">
 			<NcRichText class="activity--subject" :text="message.subject" :arguments="message.parameters" />
-			<div class="activity--timestamp" :title="formatReadableDate(activity.datetime)">
+			<div class="activity--timestamp" :name="formatReadableDate(activity.datetime)">
 				{{ relativeDate(activity.datetime) }}
 			</div>
 		</div>
diff --git a/src/components/AttachmentDragAndDrop.vue b/src/components/AttachmentDragAndDrop.vue
index d88ef760c..771e358ad 100644
--- a/src/components/AttachmentDragAndDrop.vue
+++ b/src/components/AttachmentDragAndDrop.vue
@@ -41,7 +41,7 @@
 			</div>
 		</transition>
 
-		<NcModal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
+		<NcModal v-if="modalShow" :name="t('deck', 'File already exists')" @close="modalShow=false">
 			<div class="modal__content">
 				<h2>{{ t('deck', 'File already exists') }}</h2>
 				<p>
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index b0142e3ed..6dcc30235 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -89,14 +89,14 @@
 					<NcPopover container=".board-action-buttons__filter"
 						:placement="'bottom-end'"
 						:aria-label="t('deck', 'Active filters')"
-						:title="t('deck', 'Active filters')"
+						:name="t('deck', 'Active filters')"
 						:tooltip="t('deck', 'Active filters')"
 						@show="filterVisible=true"
 						@hide="filterVisible=false">
 						<!-- We cannot use NcActions here are the popover trigger does not update on reactive icons -->
 						<NcButton slot="trigger"
 							ref="filterPopover"
-							:title="t('deck', 'Apply filter')"
+							:name="t('deck', 'Apply filter')"
 							class="filter-button"
 							:type="isFilterActive ? 'primary' : 'tertiary'">
 							<template #icon>
@@ -203,7 +203,7 @@
 				</div>
 
 				<NcActions :aria-label="t('deck', 'View Modes')"
-					:title="t('deck', 'Toggle View Modes')">
+					:name="t('deck', 'Toggle View Modes')">
 					<NcActionButton @click="toggleShowArchived">
 						<template #icon>
 							<ArchiveIcon :size="20" decorative />
@@ -231,7 +231,7 @@
 				<NcActions>
 					<NcActionButton icon="icon-menu-sidebar"
 						:aria-label="t('deck', 'Open details')"
-						:title="t('deck', 'Details')"
+						:name="t('deck', 'Details')"
 						@click="toggleDetailsView" />
 				</NcActions>
 			</div>
diff --git a/src/components/board/BoardSidebar.vue b/src/components/board/BoardSidebar.vue
index 8b73406a4..6955d2dda 100644
--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@@ -23,7 +23,7 @@
 <template>
 	<NcAppSidebar v-if="board != null"
 		:actions="[]"
-		:title="board.title"
+		:name="board.title"
 		@close="closeSidebar">
 		<NcAppSidebarTab id="sharing"
 			:order="0"
diff --git a/src/components/board/SharingTabSidebar.vue b/src/components/board/SharingTabSidebar.vue
index e5dea65aa..ed41b584c 100644
--- a/src/components/board/SharingTabSidebar.vue
+++ b/src/components/board/SharingTabSidebar.vue
@@ -1,8 +1,8 @@
 <template>
 	<div>
-		<NcMultiselect v-if="canShare"
+		<NcSelect v-if="canShare"
 			v-model="addAcl"
-			:placeholder="t('deck', 'Share board with a user, group or circle …')"
+			:input-label="t('deck', 'Share board with a user, group or team …')"
 			:options="formatedSharees"
 			:user-select="true"
 			label="displayName"
@@ -11,14 +11,14 @@
 			track-by="multiselectKey"
 			:internal-search="false"
 			@input="clickAddAcl"
-			@search-change="asyncFind">
+			@search="(search, loading) => asyncFind(search, loading)">
 			<template #noOptions>
 				{{ isSearching ? t('deck', 'Searching for users, groups and circles …') : t('deck', 'No participants found') }}
 			</template>
 			<template #noResult>
 				{{ isSearching ? t('deck', 'Searching for users, groups and circles …') : t('deck', 'No participants found') }}
 			</template>
-		</NcMultiselect>
+		</NcSelect>
 
 		<ul id="shareWithList"
 			class="shareWithList">
@@ -88,7 +88,7 @@
 </template>
 
 <script>
-import { NcAvatar, NcMultiselect, NcActions, NcActionButton, NcActionCheckbox, NcRelatedResourcesPanel } from '@nextcloud/vue'
+import { NcAvatar, NcSelect, NcActions, NcActionButton, NcActionCheckbox, NcRelatedResourcesPanel } from '@nextcloud/vue'
 import { CollectionList } from 'nextcloud-vue-collections'
 import { mapGetters, mapState } from 'vuex'
 import { getCurrentUser } from '@nextcloud/auth'
@@ -103,7 +103,7 @@ export default {
 		NcActions,
 		NcActionButton,
 		NcActionCheckbox,
-		NcMultiselect,
+		NcSelect,
 		CollectionList,
 		NcRelatedResourcesPanel,
 	},
@@ -170,7 +170,7 @@ export default {
 		},
 	},
 	mounted() {
-		this.asyncFind('')
+		this.asyncFind('', () => {})
 	},
 	methods: {
 		debouncedFind: debounce(async function(query) {
@@ -178,8 +178,10 @@ export default {
 			await this.$store.dispatch('loadSharees', query)
 			this.isSearching = false
 		}, 300),
-		async asyncFind(query) {
+		async asyncFind(query, loading) {
+			loading(true)
 			await this.debouncedFind(query)
+			loading(false)
 		},
 		async clickAddAcl() {
 			this.addAclForAPI = {
diff --git a/src/components/card/AssignmentSelector.vue b/src/components/card/AssignmentSelector.vue
index 6b9287b6c..ba03c5714 100644
--- a/src/components/card/AssignmentSelector.vue
+++ b/src/components/card/AssignmentSelector.vue
@@ -3,19 +3,19 @@
 		<div class="selector-wrapper--icon">
 			<AccountMultiple :size="20" />
 		</div>
-		<NcMultiselect v-if="canEdit"
+		<NcSelect v-if="canEdit"
 			v-model="assignedUsers"
 			class="selector-wrapper--selector"
 			:disabled="assignables.length === 0"
 			:multiple="true"
 			:options="formatedAssignables"
 			:user-select="true"
-			:auto-limit="false"
-			:placeholder="t('deck', 'Assign a user to this card…')"
+			:aria-label-combobox="t('deck', 'Assign a user to this card…')"
+			:placeholder="t('deck', 'Select a user to assign to this card…')"
 			label="displayname"
 			track-by="multiselectKey"
-			@select="onSelect"
-			@remove="onRemove">
+			@option:selected="onSelect"
+			@option:deselected="onRemove">
 			<template #tag="scope">
 				<div class="avatarlist--inline">
 					<NcAvatar :user="scope.option.uid"
@@ -25,7 +25,7 @@
 						:disable-menu="true" />
 				</div>
 			</template>
-		</NcMultiselect>
+		</NcSelect>
 		<div v-else class="avatar-list--readonly">
 			<NcAvatar v-for="option in assignedUsers"
 				:key="option.primaryKey"
@@ -39,14 +39,14 @@
 
 <script>
 import { defineComponent } from 'vue'
-import { NcAvatar, NcMultiselect } from '@nextcloud/vue'
+import { NcAvatar, NcSelect } from '@nextcloud/vue'
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 
 export default defineComponent({
 	name: 'AssignmentSelector',
 	components: {
 		AccountMultiple,
-		NcMultiselect,
+		NcSelect,
 		NcAvatar,
 	},
 	props: {
@@ -117,11 +117,12 @@ export default defineComponent({
 				this.assignedUsers = []
 			}
 		},
-		onSelect(user) {
-			this.$emit('select', user)
+		onSelect(options) {
+			const addition = options.filter((item) => !this.card.assignedUsers.find((user) => user.participant.primaryKey === item.primaryKey))
+			this.$emit('select', addition[0])
 		},
-		onRemove(user) {
-			this.$emit('remove', user)
+		onRemove(removed) {
+			this.$emit('remove', removed)
 		},
 	},
 })
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 2f6b6536f..b14f7000f 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -23,7 +23,7 @@
 <template>
 	<NcAppSidebar v-if="currentBoard && currentCard"
 		:active="tabId"
-		:title="title"
+		:name="title"
 		:subtitle="subtitle"
 		:subtitle-tooltip="subtitleTooltip"
 		:title-editable="titleEditable"
diff --git a/src/components/card/CardSidebarTabDetails.vue b/src/components/card/CardSidebarTabDetails.vue
index 241cdfadf..c39b875d6 100644
--- a/src/components/card/CardSidebarTabDetails.vue
+++ b/src/components/card/CardSidebarTabDetails.vue
@@ -178,14 +178,13 @@ export default {
 		},
 
 		async addLabelToBoardAndCard(name) {
-			const newLabel = await this.$store.dispatch('addLabelToCurrentBoardAndCard', {
+			await this.$store.dispatch('addLabelToCurrentBoardAndCard', {
 				card: this.copiedCard,
 				newLabel: {
 					title: name,
 					color: this.randomColor(),
 				},
 			})
-			this.copiedCard.labels.push(newLabel)
 		},
 
 		removeLabelFromCard(removedLabel) {
diff --git a/src/components/card/DueDateSelector.vue b/src/components/card/DueDateSelector.vue
index eb2680827..084822436 100644
--- a/src/components/card/DueDateSelector.vue
+++ b/src/components/card/DueDateSelector.vue
@@ -66,7 +66,7 @@
 			<div class="due-actions">
 				<NcButton v-if="!card.archived"
 					type="tertiary"
-					:title="t('deck', 'Not completed')"
+					:name="t('deck', 'Not completed')"
 					@click="changeCardDoneStatus()">
 					<template #icon>
 						<ClearIcon :size="20" />
diff --git a/src/components/card/TagSelector.vue b/src/components/card/TagSelector.vue
index 45c68fb1f..11b1f8bbd 100644
--- a/src/components/card/TagSelector.vue
+++ b/src/components/card/TagSelector.vue
@@ -3,46 +3,48 @@
 		<div class="selector-wrapper--icon">
 			<TagMultiple :size="20" />
 		</div>
-		<NcMultiselect :value="assignedLabels"
+		<NcSelect :value="assignedLabels"
 			class="selector-wrapper--selector"
 			:multiple="true"
 			:disabled="disabled"
 			:options="labelsSorted"
-			:placeholder="t('deck', 'Assign a tag to this card…')"
+			:aria-label-combobox="t('deck', 'Assign a tag to this card…')"
+			:placeholder="t('deck', 'Select or create a tag…')"
 			:taggable="true"
+			:close-on-select="false"
 			label="title"
 			track-by="id"
 			tag-position="bottom"
-			@select="onSelect"
-			@remove="onRemove"
-			@tag="onNewTag">
+			@option:selected="onSelect"
+			@option:deselected="onRemove"
+			@option:created="onNewTag">
 			<template #option="scope">
-				<div v-if="!scope.option?.isTag" :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
-					{{ scope.option.title }}
+				<div v-if="!scope?.isTag" :style="{ backgroundColor: '#' + scope.color, color: textColor(scope.color)}" class="tag">
+					{{ scope.title }}
 				</div>
 				<div v-else>
 					{{ t('deck', 'Create a new tag:') }} <div class="tag">
-						{{ scope.option.label }}
+						{{ scope.label }}
 					</div>
 				</div>
 			</template>
-			<template #tag="scope">
-				<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
-					{{ scope.option.title }}
+			<template #selected-option="scope">
+				<div :style="{ backgroundColor: '#' + scope.color, color: textColor(scope.color)}" class="tag">
+					{{ scope.title }}
 				</div>
 			</template>
-		</NcMultiselect>
+		</NcSelect>
 	</div>
 </template>
 
 <script>
-import { NcMultiselect } from '@nextcloud/vue'
+import { NcSelect } from '@nextcloud/vue'
 import Color from '../../mixins/color.js'
 import TagMultiple from 'vue-material-design-icons/TagMultiple.vue'
 
 export default {
 	name: 'TagSelector',
-	components: { TagMultiple, NcMultiselect },
+	components: { TagMultiple, NcSelect },
 	mixins: [Color],
 	props: {
 		card: {
@@ -61,20 +63,22 @@ export default {
 	computed: {
 		labelsSorted() {
 			return [...this.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
+				.filter(label => this.card.labels.findIndex((l) => l.id === label.id) === -1)
 		},
 		assignedLabels() {
 			return [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
 		},
 	},
 	methods: {
-		onSelect(newLabel) {
-			this.$emit('select', newLabel)
+		onSelect(options) {
+			const addedLabel = options.filter(option => !this.card.labels.includes(option))
+			this.$emit('select', addedLabel[0])
 		},
 		onRemove(removedLabel) {
 			this.$emit('remove', removedLabel)
 		},
-		async onNewTag(name) {
-			this.$emit('newtag', name)
+		async onNewTag(option) {
+			this.$emit('newtag', option.title)
 		},
 	},
 }
@@ -83,17 +87,17 @@ export default {
 <style lang="scss" scoped>
 @import '../../css/selector';
 
-.multiselect--active {
-	z-index: 10022;
+.v-select:deep(.vs__selected) {
+	padding-left: 0 !important;
 }
 
 .tag {
 	flex-grow: 0;
 	flex-shrink: 1;
 	overflow: hidden;
-	padding: 0px 5px;
-	border-radius: 15px;
-	font-size: 85%;
+	padding: 3px 12px;
+	display: inline-block;
+	border-radius: var(--border-radius-pill);
 	margin-right: 3px;
 }
 </style>
diff --git a/src/components/cards/AvatarList.vue b/src/components/cards/AvatarList.vue
index e228eba37..13a0cca4e 100644
--- a/src/components/cards/AvatarList.vue
+++ b/src/components/cards/AvatarList.vue
@@ -22,37 +22,52 @@
 
 <template>
 	<div class="avatars">
-		<div class="avatar-list" @click.stop="togglePopover">
-			<div v-if="popover.length > 0">
-				<AccountMultiple class="avatardiv more-avatars" :size="24" />
-			</div>
-			<div v-for="user in firstUsers" :key="user.id">
-				<NcAvatar v-if="user.type === 0"
-					:user="user.participant.uid"
-					:display-name="user.participant.displayname"
-					:disable-menu="true"
-					:show-user-status="false"
-					:size="32" />
-				<NcAvatar v-if="user.type === 1"
-					:user="user.participant.uid"
-					:display-name="user.participant.displayname"
-					:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Group)')"
-					:is-no-user="true"
-					:disable-="true"
-					:size="32" />
-				<NcAvatar v-if="user.type === 7"
-					:user="user.participant.uid"
-					:display-name="user.participant.displayname"
-					:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Circle)')"
-					:is-no-user="true"
-					:disable-="true"
-					:size="32" />
-			</div>
-		</div>
-
-		<div v-show="popoverVisible" class="popovermenu menu-right">
-			<NcPopoverMenu :menu="popover" />
-			<slot />
+		<div>
+			<NcPopover>
+				<template #trigger="{ attrs }">
+					<button class="avatar-list" v-bind="attrs" @click.stop>
+						<div v-if="popover.length > 0">
+							<AccountMultiple class="avatardiv more-avatars" :size="24" />
+						</div>
+						<div v-for="user in firstUsers" :key="user.id">
+							<NcAvatar v-if="user.type === 0"
+								:user="user.participant.uid"
+								:display-name="user.participant.displayname"
+								:disable-menu="true"
+								:show-user-status="false"
+								:size="32" />
+							<NcAvatar v-if="user.type === 1"
+								:user="user.participant.uid"
+								:display-name="user.participant.displayname"
+								:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Group)')"
+								:is-no-user="true"
+								:disable-="true"
+								:size="32" />
+							<NcAvatar v-if="user.type === 7"
+								:user="user.participant.uid"
+								:display-name="user.participant.displayname"
+								:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Team)')"
+								:is-no-user="true"
+								:disable-="true"
+								:size="32" />
+						</div>
+					</button>
+				</template>
+				<div>
+					<div v-for="user in users"
+						:key="user.id"
+						class="avatar-list-entry">
+						<NcAvatar :user="user.participant.uid"
+							:display-name="user.participant.displayname"
+							:disable-menu="true"
+							:is-no-user="user.type !== 0"
+							:size="32" />
+						<div class="avatar-list-entry__label">
+							{{ user.participant.displayname }}
+						</div>
+					</div>
+				</div>
+			</NcPopover>
 		</div>
 
 		<div class="avatar-print-list">
@@ -70,7 +85,7 @@
 </template>
 
 <script>
-import { NcAvatar, NcPopoverMenu, Tooltip } from '@nextcloud/vue'
+import { NcAvatar, NcPopover, Tooltip } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 
@@ -78,7 +93,7 @@ export default {
 	name: 'AvatarList',
 	components: {
 		NcAvatar,
-		NcPopoverMenu,
+		NcPopover,
 		AccountMultiple,
 	},
 	directives: {
@@ -172,8 +187,12 @@ export default {
 	.avatar-list {
 		float: right;
 		display: inline-flex;
-		padding-right: $avatar-offset;
 		flex-direction: row-reverse;
+		padding: 0;
+		padding-right: $avatar-offset;
+		margin: 0;
+		border: 0;
+		background: transparent;
 
 		& > div {
 			height: 32px;
@@ -199,6 +218,15 @@ export default {
 
 	}
 
+	.avatar-list-entry {
+		display: flex;
+		padding: 6px 12px;
+
+		&__label {
+			padding: 4px 12px;
+		}
+	}
+
 	.popovermenu {
 		display: block;
 		margin: 40px -6px;
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index fd34e188c..9c4248f38 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -68,7 +68,7 @@
 					tag="ul"
 					class="labels"
 					@click.stop="openCard">
-					<li v-for="label in labelsSorted" :key="label.id" :style="labelStyle(label)">
+					<li v-for="label in labelsSorted" :key="label?.id ?? label?.title" :style="labelStyle(label)">
 						<span @click.stop="applyLabelFilter(label)">{{ label.title }}</span>
 					</li>
 				</transition-group>
diff --git a/src/components/cards/badges/DueDate.vue b/src/components/cards/badges/DueDate.vue
index 752d1796e..bc5031b2d 100644
--- a/src/components/cards/badges/DueDate.vue
+++ b/src/components/cards/badges/DueDate.vue
@@ -23,7 +23,7 @@
 <template>
 	<div v-if="card" class="duedate" :data-due-state="dueState">
 		<transition name="zoom">
-			<div v-if="card.duedate || card.done" class="due" :title="absoluteDate">
+			<div v-if="card.duedate || card.done" class="due" :name="absoluteDate">
 				<CheckCircle v-if="card.done" :size="16" />
 				<Clock v-else-if="overdue" :size="16" />
 				<ClockOutline v-else :size="16" />
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
index ee8339f8e..0dfcf3cc6 100644
--- a/src/components/navigation/AppNavigation.vue
+++ b/src/components/navigation/AppNavigation.vue
@@ -23,7 +23,7 @@
 <template>
 	<NcAppNavigation :class="{'icon-loading': loading}">
 		<template #list>
-			<NcAppNavigationItem :title="t('deck', 'Upcoming cards')"
+			<NcAppNavigationItem :name="t('deck', 'Upcoming cards')"
 				:exact="true"
 				to="/">
 				<template #icon>
@@ -61,7 +61,7 @@
 			<AppNavigationAddBoard v-if="canCreate" />
 		</template>
 		<template #footer>
-			<NcAppNavigationSettings :title="t('deck', 'Deck settings')">
+			<NcAppNavigationSettings :name="t('deck', 'Deck settings')">
 				<NcButton @click="showHelp = true">
 					{{ t('deck', 'Keyboard shortcuts') }}
 				</NcButton>
@@ -97,14 +97,14 @@
 						</label>
 					</div>
 
-					<NcMultiselect v-if="isAdmin"
+					<NcSelect v-if="isAdmin"
 						v-model="groupLimit"
 						:class="{'icon-loading-small': groupLimitDisabled}"
 						open-direction="bottom"
 						:options="groups"
 						:multiple="true"
 						:disabled="groupLimitDisabled"
-						:placeholder="t('deck', 'Limit board creation to some groups')"
+						:input-label="t('deck', 'Limit board creation to some groups')"
 						label="displayname"
 						track-by="id"
 						@input="updateConfig" />
@@ -121,7 +121,7 @@
 import axios from '@nextcloud/axios'
 import { mapGetters } from 'vuex'
 import ClickOutside from 'vue-click-outside'
-import { NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings, NcMultiselect, NcButton } from '@nextcloud/vue'
+import { NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings, NcSelect, NcButton } from '@nextcloud/vue'
 import AppNavigationAddBoard from './AppNavigationAddBoard.vue'
 import AppNavigationBoardCategory from './AppNavigationBoardCategory.vue'
 import { loadState } from '@nextcloud/initial-state'
@@ -144,7 +144,7 @@ export default {
 		NcButton,
 		AppNavigationAddBoard,
 		AppNavigationBoardCategory,
-		NcMultiselect,
+		NcSelect,
 		NcAppNavigationItem,
 		ArchiveIcon,
 		CalendarIcon,
diff --git a/src/components/navigation/AppNavigationAddBoard.vue b/src/components/navigation/AppNavigationAddBoard.vue
index bf22834d2..564b0ead6 100644
--- a/src/components/navigation/AppNavigationAddBoard.vue
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@@ -21,7 +21,7 @@
   -->
 <template>
 	<NcAppNavigationItem v-if="!editing"
-		:title="t('deck', 'Add board')"
+		:name="t('deck', 'Add board')"
 		icon="icon-add"
 		@click.prevent.stop="startCreateBoard" />
 	<div v-else class="board-create">
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index 52450f68e..5f221cabe 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -21,7 +21,7 @@
   -->
 <template>
 	<NcAppNavigationItem v-if="!editing"
-		:title="!deleted ? board.title : undoText"
+		:name="!deleted ? board.title : undoText"
 		:loading="loading"
 		:to="routeTo"
 		:undo="deleted"
@@ -29,10 +29,9 @@
 		@undo="unDelete">
 		<NcAppNavigationIconBullet slot="icon" :color="board.color" />
 
-		<NcAppNavigationCounter v-if="board.acl.length"
-			slot="counter"
-			class="icon-shared"
-			style="opacity: 0.5" />
+		<template #counter>
+			<AccountIcon v-if="board.acl.length > 0" />
+		</template>
 
 		<template v-if="!deleted" slot="actions">
 			<template v-if="!isDueSubmenuActive">
@@ -113,7 +112,7 @@
 				</NcActionButton>
 			</template>
 			<NcActionButton v-else-if="!board.archived && board.acl.length > 0"
-				:title="t('deck', 'Due date reminders')"
+				:name="t('deck', 'Due date reminders')"
 				:icon="dueDateReminderIcon"
 				@click="isDueSubmenuActive=true">
 				{{ dueDateReminderText }}
@@ -144,23 +143,21 @@
 </template>
 
 <script>
-import { NcAppNavigationIconBullet, NcAppNavigationCounter, NcAppNavigationItem, NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
+import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
 import CloneIcon from 'vue-material-design-icons/ContentDuplicate.vue'
-import { loadState } from '@nextcloud/initial-state'
-
-const canCreateState = loadState('deck', 'canCreate')
+import AccountIcon from 'vue-material-design-icons/Account.vue'
 
 export default {
 	name: 'AppNavigationBoard',
 	components: {
 		NcAppNavigationIconBullet,
-		NcAppNavigationCounter,
 		NcAppNavigationItem,
 		NcColorPicker,
 		NcActions,
 		NcActionButton,
+		AccountIcon,
 		ArchiveIcon,
 		CloneIcon,
 	},
diff --git a/src/components/navigation/AppNavigationBoardCategory.vue b/src/components/navigation/AppNavigationBoardCategory.vue
index 7d235679c..83ecca046 100644
--- a/src/components/navigation/AppNavigationBoardCategory.vue
+++ b/src/components/navigation/AppNavigationBoardCategory.vue
@@ -21,7 +21,7 @@
   -->
 <template>
 	<NcAppNavigationItem v-if="boards.length > 0"
-		:title="text"
+		:name="text"
 		:to="to"
 		:exact="true"
 		:allow-collapse="collapsible"
diff --git a/src/directives/focus.js b/src/directives/focus.js
new file mode 100644
index 000000000..8ed2e42fd
--- /dev/null
+++ b/src/directives/focus.js
@@ -0,0 +1,22 @@
+/**
+ *
+ * @param el
+ * @param binding
+ */
+function focusElement(el, binding) {
+	// If directive has bound value
+	if (binding.value !== undefined && !binding.value) return
+
+	// Focus the element
+	el.focus()
+}
+
+// Register a global custom directive called `v-focus`
+export default {
+	bind(el, binding, vnode) {
+		// When the component of the element gets activated
+		vnode.context.$on('hook:activated', () => focusElement(el, binding))
+	},
+	// When the bound element is inserted into the DOM...
+	inserted: focusElement,
+}
diff --git a/src/init-reference.js b/src/init-reference.js
index dab2f7ad6..23856f86a 100644
--- a/src/init-reference.js
+++ b/src/init-reference.js
@@ -19,29 +19,28 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { registerWidget, registerCustomPickerElement, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Components/NcRichText.js'
-import { Tooltip } from '@nextcloud/vue'
-import Vue from 'vue'
-import CardReferenceWidget from './views/CardReferenceWidget.vue'
-import BoardReferenceWidget from './views/BoardReferenceWidget.vue'
-import CommentReferenceWidget from './views/CommentReferenceWidget.vue'
+import { registerWidget, registerCustomPickerElement, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Functions/registerReference.js'
 
 import { translate, translatePlural } from '@nextcloud/l10n'
 
 import './shared-init.js'
 
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
-Vue.prototype.OC = window.OC
-Vue.prototype.OCA = window.OCA
-Vue.directive('tooltip', Tooltip)
-Vue.directive('focus', {
-	inserted(el) {
-		el.focus()
-	},
-})
+const prepareVue = (Vue) => {
+	Vue.prototype.t = translate
+	Vue.prototype.n = translatePlural
+	Vue.prototype.OC = window.OC
+	Vue.prototype.OCA = window.OCA
+	Vue.directive('focus', {
+		inserted(el) {
+			el.focus()
+		},
+	})
+}
 
-registerWidget('deck-card', (el, { richObjectType, richObject, accessible }) => {
+registerWidget('deck-card', async (el, { richObjectType, richObject, accessible }) => {
+	const { default: Vue } = await import('vue')
+	prepareVue(Vue)
+	const { default: CardReferenceWidget } = await import('./views/CardReferenceWidget.vue')
 	// trick to change the wrapper element size, otherwise it always is 100%
 	// which is not very nice with a simple card
 	el.parentNode.style['max-width'] = '400px'
@@ -58,7 +57,10 @@ registerWidget('deck-card', (el, { richObjectType, richObject, accessible }) =>
 	}).$mount(el)
 })
 
-registerWidget('deck-board', (el, { richObjectType, richObject, accessible }) => {
+registerWidget('deck-board', async (el, { richObjectType, richObject, accessible }) => {
+	const { default: Vue } = await import('vue')
+	prepareVue(Vue)
+	const { default: BoardReferenceWidget } = await import('./views/BoardReferenceWidget.vue')
 	el.parentNode.style['max-width'] = '400px'
 	el.parentNode.style['margin-left'] = '0'
 	el.parentNode.style['margin-right'] = '0'
@@ -73,7 +75,11 @@ registerWidget('deck-board', (el, { richObjectType, richObject, accessible }) =>
 	}).$mount(el)
 })
 
-registerWidget('deck-comment', (el, { richObjectType, richObject, accessible }) => {
+registerWidget('deck-comment', async (el, { richObjectType, richObject, accessible }) => {
+	const { default: Vue } = await import('vue')
+	prepareVue(Vue)
+	const { default: CommentReferenceWidget } = await import('./views/CommentReferenceWidget.vue')
+
 	el.parentNode.style['max-width'] = '400px'
 	el.parentNode.style['margin-left'] = '0'
 	el.parentNode.style['margin-right'] = '0'
@@ -89,9 +95,9 @@ registerWidget('deck-comment', (el, { richObjectType, richObject, accessible })
 })
 
 registerCustomPickerElement('create-new-deck-card', async (el, { providerId, accessible }) => {
-	const { default: Vue } = await import(/* webpackChunkName: "reference-picker-lazy" */'vue')
+	const { default: Vue } = await import('vue')
 	Vue.mixin({ methods: { t, n } })
-	const { default: CreateNewCardCustomPicker } = await import(/* webpackChunkName: "reference-picker-lazy" */'./views/CreateNewCardCustomPicker.vue')
+	const { default: CreateNewCardCustomPicker } = await import('./views/CreateNewCardCustomPicker.vue')
 	const Element = Vue.extend(CreateNewCardCustomPicker)
 	const vueElement = new Element({
 		propsData: {
diff --git a/src/views/CreateNewCardCustomPicker.vue b/src/views/CreateNewCardCustomPicker.vue
index 32824b916..a5c283111 100644
--- a/src/views/CreateNewCardCustomPicker.vue
+++ b/src/views/CreateNewCardCustomPicker.vue
@@ -15,40 +15,40 @@
 					<div class="selector-wrapper--icon">
 						<DeckIcon :size="20" />
 					</div>
-					<NcMultiselect v-model="selectedBoard"
+					<NcSelect v-model="selectedBoard"
 						:placeholder="t('deck', 'Select a board')"
 						:options="boards"
 						:disabled="loading"
 						label="title"
 						class="selector-wrapper--selector multiselect-board"
-						@select="onSelectBoard">
-						<template slot="singleLabel" slot-scope="props">
+						@option:selected="onSelectBoard">
+						<template #selected-option="option">
 							<span>
-								<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
-								<span>{{ props.option.title }}</span>
+								<span :style="{ 'backgroundColor': '#' + option.color }" class="board-bullet" />
+								<span data-cy="board-select-title">{{ option.title }}</span>
 							</span>
 						</template>
-						<template slot="option" slot-scope="props">
+						<template #option="option">
 							<span>
-								<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
-								<span>{{ props.option.title }}</span>
+								<span :style="{ 'backgroundColor': '#' + option.color }" class="board-bullet" />
+								<span data-cy="board-select-title">{{ option.title }}</span>
 							</span>
 						</template>
-					</NcMultiselect>
+					</NcSelect>
 				</div>
 
 				<div class="col selector-wrapper">
 					<div class="selector-wrapper--icon">
 						<FormatColumnsIcon :size="20" />
 					</div>
-					<NcMultiselect v-model="selectedStack"
+					<NcSelect v-model="selectedStack"
 						:placeholder="t('deck', 'Select a list')"
 						:options="stacksFromBoard"
 						:max-height="100"
 						:disabled="loading || !selectedBoard"
 						class="selector-wrapper--selector multiselect-list"
 						label="title"
-						@select="onSelectStack" />
+						@option:selected="onSelectStack" />
 				</div>
 			</div>
 
@@ -117,7 +117,7 @@
 import { generateUrl } from '@nextcloud/router'
 import {
 	NcButton,
-	NcMultiselect,
+	NcSelect,
 	NcEmptyContent,
 	NcLoadingIcon,
 } from '@nextcloud/vue'
@@ -148,7 +148,7 @@ export default {
 		TagSelector,
 		AssignmentSelector,
 		NcButton,
-		NcMultiselect,
+		NcSelect,
 		NcEmptyContent,
 		NcLoadingIcon,
 	},
@@ -373,7 +373,7 @@ h2 {
 	gap: 12px;
 }
 
-.multiselect {
+.v-select {
 	min-width: auto !important;
 }