diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue index f7131a7530..b82aafcf7c 100644 --- a/src/components/NcSelect/NcSelect.vue +++ b/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,7 +864,6 @@ export default { if (this.filterBy !== null) { return this.filterBy } - if (this.userSelect) { return (option, label, search) => { return (`${label} ${option.subtitle}` || '') @@ -863,27 +871,22 @@ export default { .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 }, }, diff --git a/src/components/NcSelectTags/NcSelectTags.vue b/src/components/NcSelectTags/NcSelectTags.vue index 10b94e3e58..7b9ca98fce 100644 --- a/src/components/NcSelectTags/NcSelectTags.vue +++ b/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 @@ -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