Merge pull request #3747 from nextcloud/fix/limit-select-tags

Fix tag search

src/components/NcSelect/NcSelect.vue

@@ -618,6 +618,14 @@ export default {
 			}),
 		},
 
+		/**
+		 * Sets the maximum number of options to display in the dropdown list
+		 */
+		limit: {
+			type: Number,
+			default: null,
+		},
+
 		/**
 		 * Disable the component
 		 *
@@ -669,7 +677,8 @@ export default {
 		/**
 		 * Key of the displayed label for object options
 		 *
-		 * Defaults to `'label'`
+		 * Defaults to the internal vue-select string documented at the link
+		 * below
 		 *
 		 * Enabling `userSelect` will automatically set this to `'displayName'`
 		 * unless this prop is set explicitly
@@ -855,35 +864,29 @@ export default {
 			if (this.filterBy !== null) {
 				return this.filterBy
 			}
-
 			if (this.userSelect) {
 				return (option, label, search) => {
 					return (`${label} ${option.subtitle}` || '')
 						.toLocaleLowerCase()
 						.indexOf(search.toLocaleLowerCase()) > -1
 				}
 			}
-			return null
+			return VueSelect.props.filterBy.default
 		},
 
 		localLabel() {
 			if (this.label !== null) {
 				return this.label
 			}
-
 			if (this.userSelect) {
 				return 'displayName'
 			}
-			return 'label'
+			return VueSelect.props.label.default
 		},
 
 		propsToForward() {
 			const {
-				// Custom overrides of vue-select props
-				calculatePosition,
-				filterBy,
-				label,
-				// Props handled by the component itself
+				// Props handled by this component
 				noWrap,
 				placement,
 				userSelect,
@@ -893,14 +896,12 @@ export default {
 
 			const propsToForward = {
 				...initialPropsToForward,
+				// Custom overrides of vue-select props
 				calculatePosition: this.localCalculatePosition,
+				filterBy: this.localFilterBy,
 				label: this.localLabel,
 			}
 
-			if (this.localFilterBy) {
-				propsToForward.filterBy = this.localFilterBy
-			}
-
 			return propsToForward
 		},
 	},

src/components/NcSelectTags/NcSelectTags.vue

@@ -67,11 +67,11 @@ export default {
 ```
 
 ### Custom filter
-Because of compatibility reasons only 5 tag entries are shown by default. If you want to show all available tags set the `optionsFilter` function-prop to `null`:
+Because of compatibility reasons only 5 tag entries are shown by default. If you want to show all available tags set the `limit` prop to `null`:
 ```vue
 <template>
 	<div class="wrapper">
-		<NcSelectTags v-model="value" :options-filter="null" />
+		<NcSelectTags v-model="value" :limit="null" />
 		{{ value }}
 	</div>
 </template>
@@ -192,6 +192,17 @@ export default {
 			},
 		},
 
+		/**
+		 * Sets the maximum number of tags to display in the dropdown list
+		 *
+		 * Because of compatibility reasons only 5 tag entries are shown by
+		 * default
+		 */
+		limit: {
+			type: Number,
+			default: 5,
+		},
+
 		/**
 		 * Allow selection of multiple options
 		 *
@@ -210,7 +221,7 @@ export default {
 		 */
 		optionsFilter: {
 			type: Function,
-			default: (_element, index) => index < 5,
+			default: null,
 		},
 
 		/**
@@ -280,7 +291,7 @@ export default {
 
 		propsToForward() {
 			const {
-				// Props handled by the component itself
+				// Props handled by this component
 				optionsFilter,
 				// Props to forward
 				...propsToForward