Enhancements : improve most recent global search UI

- Fixes remove person filter/chip when applied
- Close person searchable filter via workaround

Resolves : #41381

Signed-off-by: fenn-cs <[email protected]>

Author: nfebe

core/src/components/GlobalSearch/SearchableList.vue

@@ -21,9 +21,9 @@
 -->
 
 <template>
-	<NcPopover :shown="opened">
+	<NcPopover>
 		<template #trigger>
-			<slot name="trigger" />
+			<slot ref="popoverTrigger" name="trigger" />
 		</template>
 		<div class="searchable-list__wrapper">
 			<NcTextField :value.sync="searchTerm"
@@ -122,7 +122,6 @@ export default {
 		itemSelected(element) {
 			this.$emit('item-selected', element)
 			this.clearSearch()
-			this.opened = false
 		},
 	},
 }

core/src/views/GlobalSearchModal.vue

@@ -57,7 +57,7 @@
 					:empty-content-text="t('core', 'Not found')"
 					@item-selected="applyPersonFilter">
 					<template #trigger>
-						<NcButton>
+						<NcButton ref="peopleFilterTrigger">
 							<template #icon>
 								<AccountGroup :size="20" />
 							</template>
@@ -357,6 +357,15 @@ export default {
 				this.personFilter.user = person.user
 				this.personFilter.name = person.displayName
 				this.filters.push(this.personFilter)
+				/*
+				 * Workaround to close SearchableList
+				 * NcPopover used in the SearchableList component does have
+				 * any prop/external state used to manage it's open status
+				 * according to https://nextcloud-vue-components.netlify.app/#/Components/NcPopover.
+				 * `:shown=''` prop used on NcPopover
+				 *  as well as as `v-close-popper` on the list items in searchable list did not work
+				 */
+				 this.$refs.peopleFilterTrigger.$el.click()
 			} else {
 				this.filters[existingPersonFilter].id = person.id
 				this.filters[existingPersonFilter].user = person.user
@@ -397,7 +406,8 @@ export default {
 
 			} else {
 				for (let i = 0; i < this.filters.length; i++) {
-					if (this.filters[i].id === 'date') {
+					// Remove date and person filter
+					if (this.filters[i].id === 'date' || this.filters[i].id === filter.id) {
 						this.dateFilterIsApplied = false
 						this.filters.splice(i, 1)
 						break