File tree 2 files changed +51
-3
lines changed
src/components/NcSelectUsers
2 files changed +51
-3
lines changed Original file line number Diff line number Diff line change
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
+ } )
Original file line number Diff line number Diff line change @@ -165,12 +165,12 @@ export default {
165
165
</docs>
166
166
167
167
<script setup>
168
- import { ref } from 'vue'
168
+ import { ref, watch } from 'vue'
169
169
import { t } from '../../l10n.js'
170
170
import createElementId from '../../utils/GenRandomId.js'
171
171
172
172
import NcListItemIcon from '../NcListItemIcon/NcListItemIcon.vue'
173
- import NcSelect from '../NcSelect/index.js '
173
+ import NcSelect from '../NcSelect/NcSelect.vue '
174
174
175
175
const props = defineProps({
176
176
/**
@@ -321,9 +321,16 @@ const props = defineProps({
321
321
},
322
322
})
323
323
324
- defineEmits(['update:modelValue'])
324
+ const emit = defineEmits(['search', 'update:modelValue'])
325
325
326
326
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
+ })
327
334
328
335
// Avatar size so the component has the same size as Nc*Field
329
336
const clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))
You can’t perform that action at this time.
0 commit comments