Merge pull request #5142 from nextcloud-libraries/fix/nc-popover--pro…

…vide-reactivity

fix(NcPopover): a11y attrs provide-inject reactivity

src/components/NcButton/NcButton.vue

@@ -440,9 +440,9 @@ export default {
 	name: 'NcButton',
 
 	inject: {
-		ncPopoverTriggerAttrs: {
+		getNcPopoverTriggerAttrs: {
 			from: 'NcPopover:trigger:attrs',
-			default: () => ({}),
+			default: () => () => ({}),
 		},
 	},
 
@@ -600,6 +600,10 @@ export default {
 		isReverseAligned() {
 			return this.alignment.includes('-')
 		},
+
+		ncPopoverTriggerAttrs() {
+			return this.getNcPopoverTriggerAttrs()
+		},
 	},
 
 	/**

src/components/NcPopover/NcPopover.vue

@@ -157,13 +157,14 @@ See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/
 
 <template>
 	<Dropdown ref="popover"
-		:shown.sync="shownProxy"
 		:distance="10"
 		:arrow-padding="10"
 		v-bind="$attrs"
 		:no-auto-focus="true /* Handled by the focus trap */"
 		:popper-class="popoverBaseClass"
+		:shown="internalShown"
 		v-on="$listeners"
+		@update:shown="internalShown = $event"
 		@apply-show="afterShow"
 		@apply-hide="afterHide">
 		<NcPopoverTriggerProvider v-slot="slotProps" :shown="internalShown" :popup-role="popupRole">
@@ -252,22 +253,14 @@ export default {
 		}
 	},
 
-	computed: {
-		shownProxy: {
-			get() {
-				return this.shown
-			},
-			set(value) {
-				this.internalShown = value
-				this.$emit('update:shown', value)
-			},
-		},
-	},
-
 	watch: {
 		shown(value) {
 			this.internalShown = value
 		},
+
+		internalShown(value) {
+			this.$emit('update:shown', value)
+		},
 	},
 
 	mounted() {

src/components/NcPopover/NcPopoverTriggerProvider.vue

@@ -1,13 +1,13 @@
 <script>
-import { computed, defineComponent } from 'vue'
+import { defineComponent } from 'vue'
 
 export default defineComponent({
 	name: 'NcPopoverTriggerProvider',
 
 	provide() {
 		return {
-			'NcPopover:trigger:shown': computed(() => this.shown),
-			'NcPopover:trigger:attrs': computed(() => this.triggerAttrs),
+			'NcPopover:trigger:shown': () => this.shown,
+			'NcPopover:trigger:attrs': () => this.triggerAttrs,
 		}
 	},