fix: Replace deprecated NcMultiselect with recommended NcSelect

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

Author: susnux

src/FormsSettings.vue

@@ -30,15 +30,15 @@
 				@update:checked="onRestrictCreationChange">
 				{{ t('forms', 'Restrict form creation to selected groups') }}
 			</NcCheckboxRadioSwitch>
-			<NcMultiselect v-model="appConfig.creationAllowedGroups"
+			<NcSelect v-model="appConfig.creationAllowedGroups"
 				:disabled="!appConfig.restrictCreation"
 				:multiple="true"
 				:options="availableGroups"
 				:placeholder="t('forms', 'Select groups')"
 				class="forms-settings__creation__multiselect"
 				label="displayName"
 				track-by="groupId"
-				@update:value="onCreationAllowedGroupsChange" />
+				@input="onCreationAllowedGroupsChange" />
 		</NcSettingsSection>
 		<NcSettingsSection :title="t('forms', 'Form sharing')">
 			<NcCheckboxRadioSwitch ref="switchAllowPublicLink"
@@ -63,7 +63,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 import logger from './utils/Logger.js'
@@ -73,7 +73,7 @@ export default {
 
 	components: {
 		NcCheckboxRadioSwitch,
-		NcMultiselect,
+		NcSelect,
 		NcSettingsSection,
 	},
 

src/components/Questions/QuestionDropdown.vue

@@ -42,16 +42,16 @@
 				{{ t('forms', 'Shuffle options') }}
 			</NcActionCheckbox>
 		</template>
-		<NcMultiselect v-if="!edit"
+		<NcSelect v-if="!edit"
 			v-model="selectedOption"
 			:name="text"
 			:placeholder="selectOptionPlaceholder"
 			:multiple="isMultiple"
 			:required="isRequired"
 			:options="sortedOptions"
+			:searchable="false"
 			label="text"
-			track-by="id"
-			@select="onSelect" />
+			@input="onInput" />
 
 		<ol v-if="edit" class="question__content">
 			<!-- Answer text input edit -->
@@ -86,7 +86,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
 import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
 import AnswerInput from './AnswerInput.vue'
 import QuestionMixin from '../../mixins/QuestionMixin.js'
@@ -99,7 +99,7 @@ export default {
 	components: {
 		AnswerInput,
 		NcActionCheckbox,
-		NcMultiselect,
+		NcSelect,
 	},
 
 	mixins: [QuestionMixin],
@@ -172,7 +172,7 @@ export default {
 	},
 
 	methods: {
-		onSelect(option) {
+		onInput(option) {
 			// Simple select
 			if (!this.isMultiple) {
 				this.$emit('update:values', [option.id])

src/components/SidebarTabs/SharingSearchDiv.vue

@@ -23,35 +23,28 @@
 
 <template>
 	<div>
-		<NcMultiselect :clear-on-select="false"
+		<NcSelect :clear-search-on-select="false"
 			:close-on-select="false"
-			:hide-selected="true"
-			:internal-search="false"
 			:loading="showLoadingCircle"
+			:get-option-key="(option) => option.key"
 			:options="options"
 			:placeholder="t('forms', 'Search for user or group …')"
-			:preselect-first="true"
-			:searchable="true"
 			:user-select="true"
 			label="displayName"
-			track-by="key"
-			@search-change="asyncSearch"
-			@select="addShare">
-			<template #noOptions>
-				{{ t('forms', 'No recommendations. Start typing.') }}
-			</template>
-			<template #noResult>
+			@search="asyncSearch"
+			@input="addShare">
+			<template #no-options>
 				{{ noResultText }}
 			</template>
-		</NcMultiselect>
+		</NcSelect>
 	</div>
 </template>
 
 <script>
 import { generateOcsUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import debounce from 'debounce'
 
 import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
@@ -60,7 +53,7 @@ import logger from '../../utils/Logger.js'
 
 export default {
 	components: {
-		NcMultiselect,
+		NcSelect,
 	},
 
 	mixins: [ShareTypes],
@@ -122,8 +115,8 @@ export default {
 		 * @return {string}
 		 */
 		noResultText() {
-			if (this.loading) {
-				return t('forms', 'Searching …')
+			if (!this.query) {
+				return t('forms', 'No recommendations. Start typing.')
 			}
 			return t('forms', 'No elements found.')
 		},
@@ -308,7 +301,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	.multiselect {
+	.select {
 		margin-bottom: 8px !important;
 		width: 100%;
 	}