Skip to content

Commit 8839de9

Browse files
authored
Merge pull request #6838 from nextcloud-libraries/backport/6811/stable8
[stable8] fix(NcSelectUsers): add missing `search` event
2 parents 189b56c + 6761b98 commit 8839de9

File tree

2 files changed

+51
-3
lines changed

2 files changed

+51
-3
lines changed

cypress/component/NcSelectUsers.cy.ts

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
3+
* SPDX-License-Identifier: AGPL-3.0-or-later
4+
*/
5+
6+
import { mount } from 'cypress/vue2'
7+
import NcSelectUsers from '../../src/components/NcSelectUsers/NcSelectUsers.vue'
8+
9+
it('emits the search event', async () => {
10+
const wrapper = mount(NcSelectUsers, {
11+
propsData: {
12+
ariaLabelCombobox: 'Search users',
13+
options: [],
14+
},
15+
})
16+
17+
wrapper.get('input[type="search"]')
18+
.type('query')
19+
20+
wrapper.then(({ wrapper }) => {
21+
expect(wrapper.emitted('search')).to.eql([['query']])
22+
})
23+
})
24+
25+
it('also emits the search event if cleared', async () => {
26+
const wrapper = mount(NcSelectUsers, {
27+
propsData: {
28+
ariaLabelCombobox: 'Search users',
29+
options: [],
30+
},
31+
})
32+
33+
wrapper.get('input[type="search"]')
34+
.type('query')
35+
wrapper.get('input[type="search"]')
36+
.type('{clearAll}')
37+
38+
wrapper.then(({ wrapper }) => {
39+
expect(wrapper.emitted('search')).to.eql([['query', '']])
40+
})
41+
})

src/components/NcSelectUsers/NcSelectUsers.vue

+10-3
Original file line numberDiff line numberDiff line change
@@ -165,12 +165,12 @@ export default {
165165
</docs>
166166

167167
<script setup>
168-
import { ref } from 'vue'
168+
import { ref, watch } from 'vue'
169169
import { t } from '../../l10n.js'
170170
import createElementId from '../../utils/GenRandomId.js'
171171

172172
import NcListItemIcon from '../NcListItemIcon/NcListItemIcon.vue'
173-
import NcSelect from '../NcSelect/index.js'
173+
import NcSelect from '../NcSelect/NcSelect.vue'
174174

175175
const props = defineProps({
176176
/**
@@ -321,9 +321,16 @@ const props = defineProps({
321321
},
322322
})
323323

324-
defineEmits(['update:modelValue'])
324+
const emit = defineEmits(['search', 'update:modelValue'])
325325

326326
const search = ref('')
327+
watch(search, () => {
328+
/**
329+
* Emitted when the user enters some query.
330+
* This can be used to asynchronously fetch more options.
331+
*/
332+
emit('search', search.value)
333+
})
327334

328335
// Avatar size so the component has the same size as Nc*Field
329336
const clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))

0 commit comments

Comments
 (0)