Merge pull request #1471 from nextcloud/fix/use-ncselect

Replace deprecated NcMultiselect with recommended NcSelect

Author: Chartman123

src/FormsSettings.vue

@@ -30,15 +30,14 @@
 				@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 +62,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 +72,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 -->
@@ -87,7 +87,7 @@ import { emit } from '@nextcloud/event-bus'
 import { generateOcsUrl } from '@nextcloud/router'
 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'
@@ -100,7 +100,7 @@ export default {
 	components: {
 		AnswerInput,
 		NcActionCheckbox,
-		NcMultiselect,
+		NcSelect,
 	},
 
 	mixins: [QuestionMixin],
@@ -173,15 +173,14 @@ export default {
 	},
 
 	methods: {
-		onSelect(option) {
-			// Simple select
-			if (!this.isMultiple) {
-				this.$emit('update:values', [option.id])
+		onInput(option) {
+			if (Array.isArray(option)) {
+				this.$emit('update:values', [...new Set(option.map((opt) => opt.id))])
 				return
 			}
 
-			// Emit values and remove duplicates
-			this.$emit('update:values', [...new Set(option.id)])
+			// Simple select
+			this.$emit('update:values', option ? [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%;
 	}