Merge pull request #6959 from nextcloud-libraries/fix/nc-actions-popover

fix(NcActions): allow to close popover on click outside

Author: susnux

src/components/NcActions/NcActions.vue

@@ -1294,6 +1294,14 @@ export default {
 		},
 
 		// MENU STATE MANAGEMENT
+		toggleMenu(state) {
+			if (state) {
+				this.openMenu()
+			} else {
+				this.closeMenu()
+			}
+		},
+
 		openMenu() {
 			if (this.opened) {
 				return
@@ -1754,20 +1762,21 @@ export default {
 				{
 					ref: 'popover',
 					delay: 0,
-					handleResize: true,
 					shown: this.opened,
 					placement: this.placement,
 					boundary: this.boundariesElement,
 					container: this.container,
-					...this.manualOpen && { triggers: [] },
+					...this.manualOpen && {
+						triggers: [],
+					},
+					closeOnClickOutside: !this.manualOpen,
 					popoverBaseClass: 'action-item__popper',
 					popupRole: this.config.popupRole,
-					setReturnFocus: this.config.withFocusTrap ? this.$refs.triggerButton?.$el : null,
+					setReturnFocus: this.config.withFocusTrap ? this.$refs.triggerButton?.$el : undefined,
 					focusTrap: this.config.withFocusTrap,
-					onShow: this.openMenu,
+					'onUpdate:shown': this.toggleMenu,
 					onAfterShow: this.onOpened,
 					onAfterClose: this.onClosed,
-					onHide: this.closeMenu,
 				},
 				{
 					trigger: () => h(NcButton, {

src/components/NcPopover/NcPopover.vue

@@ -176,19 +176,20 @@ See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/
 
 <template>
 	<Dropdown ref="popover"
+		v-model:shown="internalShown"
 		:arrow-padding="10"
 		:auto-hide="closeOnClickOutside"
 		:boundary="boundary || undefined"
 		:container
 		:delay
 		:distance="10"
+		handle-resize
 		:no-auto-focus="true /* Handled by the focus trap */"
 		:placement="internalPlacement"
 		:popper-class="popoverBaseClass"
 		:popper-triggers
 		:popper-hide-triggers
 		:popper-show-triggers
-		:shown="internalShown"
 		:triggers="internalTriggers"
 		:hide-triggers
 		:show-triggers
@@ -230,9 +231,10 @@ export default {
 	props: {
 		/**
 		 * Element to use for calculating the popper boundary (size and position).
+		 * Either a query string or the actual HTMLElement.
 		 */
 		boundary: {
-			type: String,
+			type: [String, Object],
 			default: '',
 		},