From 6ef6a454c2c28547b5a370240a12ccb12ddeaab1 Mon Sep 17 00:00:00 2001
From: Saw-jan <saw.jan.grg3e@gmail.com>
Date: Mon, 26 Oct 2026 17:21:51 +0545
Subject: [PATCH 1/4] fix: teardown properly

Signed-off-by: Saw-jan <saw.jan.grg3e@gmail.com>
---
 src/reference.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/reference.js b/src/reference.js
index c814e1db9..221d066b1 100644
--- a/src/reference.js
+++ b/src/reference.js
@@ -15,7 +15,10 @@ __webpack_nonce__ = btoa(OC.requestToken)
 /* eslint-disable-next-line no-undef */
 __webpack_public_path__ = OC.linkTo(APP_ID, 'js/')
 
-// this is where we associate our widget component with the richobjects that we return in the reference provider
+const widgetApps = new WeakMap()
+// INFO: this is where we associate our widget component with the richobjects
+//       that we return in the reference provider.
+// Link preview card.
 registerWidget(`${APP_ID}_work_package`, async (el, { richObjectType, richObject, accessible }) => {
 	// here we lazy load the components so it does not slow down the initial page load
 	const { createApp } = await import(/* webpackChunkName: "reference-wp-lazy" */'vue')
@@ -28,8 +31,14 @@ registerWidget(`${APP_ID}_work_package`, async (el, { richObjectType, richObject
 	})
 	setupGlobalProperties(widget)
 	widget.mount(el)
+	widgetApps.set(el, widget)
+}, (el) => {
+	widgetApps.get(el)?.unmount()
+	widgetApps.delete(el)
 })
 
+// INFO: register OpenProject work packages search component inside the Smart Picker.
+// Shows OpenProject smart picker when using "/" command in the chat
 registerCustomPickerElement('openproject-work-package-ref', async (el, { providerId, accessible }) => {
 	const { createApp } = await import(/* webpackChunkName: "reference-picker-lazy" */'vue')
 	const { default: WorkPackagePickerElement } = await import(/* webpackChunkName: "reference-picker-lazy" */'./views/WorkPackagePickerElement.vue')
@@ -41,7 +50,7 @@ registerCustomPickerElement('openproject-work-package-ref', async (el, { provide
 	setupGlobalProperties(app)
 	const vueElement = app.mount(el)
 
-	return new NcCustomPickerRenderResult(vueElement.$el, vueElement)
+	return new NcCustomPickerRenderResult(vueElement.$el, app)
 }, (el, renderResult) => {
-	renderResult.object.$destroy()
+	renderResult.object.unmount()
 })

From b7d27e10069b8aade43829836bb86b6812423a47 Mon Sep 17 00:00:00 2001
From: Saw-jan <saw.jan.grg3e@gmail.com>
Date: Mon, 26 Oct 2026 18:51:52 +0545
Subject: [PATCH 2/4] fix: dispatch native DOM submit event

Vue3 removed the $on instance method, and $emit triggers component events rather than native DOM events.
Therefore, dispatch a native DOM event to notify external listeners.

Signed-off-by: Saw-jan <saw.jan.grg3e@gmail.com>
---
 src/components/tab/SearchInput.vue     | 44 ++++++++++++++++----------
 src/reference.js                       | 15 ++++-----
 src/views/WorkPackagePickerElement.vue | 18 +----------
 3 files changed, 34 insertions(+), 43 deletions(-)

diff --git a/src/components/tab/SearchInput.vue b/src/components/tab/SearchInput.vue
index f3b2e046e..157fc63ef 100644
--- a/src/components/tab/SearchInput.vue
+++ b/src/components/tab/SearchInput.vue
@@ -5,7 +5,8 @@
 -->
 <template>
 	<div id="searchBar">
-		<NcSelect ref="workPackageSelect"
+		<NcSelect
+			ref="workPackageSelect"
 			class="searchInput"
 			input-id="searchInput"
 			:placeholder="placeholder"
@@ -17,7 +18,7 @@
 			:clear-search-on-blur="() => false"
 			:disabled="isDisabled"
 			@search="asyncFind"
-			@option:selected="linkWorkPackageToFile">
+			@option:selected="selectWorkPackage">
 			<template #option="option">
 				<WorkPackage :key="option.id"
 					:workpackage="option"
@@ -102,7 +103,7 @@ export default {
 			default: false,
 		},
 	},
-	emits: ['submit', 'close'],
+	emits: ['close'],
 	data: () => ({
 		state: STATE.OK,
 		searchResults: [],
@@ -190,7 +191,7 @@ export default {
 			if (data.openProjectEventName === 'work_package_creation_success') {
 				showSuccess(t('integration_openproject', 'Work package created successfully.'))
 				this.newWorkpackageCreated = true
-				await this.linkWorkPackageToFile(data.openProjectEventPayload)
+				await this.linkWorkPackage(data.openProjectEventPayload)
 			}
 		},
 		onCloseCreateWorkPackageModalEvent() {
@@ -222,19 +223,18 @@ export default {
 				await this.debounceMakeSearchRequest(query, null)
 			}
 		},
-		async getWorkPackageLink(selectedOption) {
-			return this.openprojectUrl.replace(/^\/+|\/+$/g, '') + '/wp/' + selectedOption.id
+		getWorkPackageLink(workPackageID) {
+			return this.openprojectUrl.replace(/^\/+|\/+$/g, '') + '/wp/' + workPackageID
 		},
 		debounceMakeSearchRequest: debounce(function(...args) {
 			if (args[0].length < SEARCH_CHAR_LIMIT) return
 			return this.makeSearchRequest(...args)
 		}, DEBOUNCE_THRESHOLD),
-		async linkWorkPackageToFile(selectedOption) {
-			if (this.isSmartPicker) {
-				const link = await this.getWorkPackageLink(selectedOption)
-				this.$emit('submit', link)
-				return
-			}
+		submitSelectedWorkPackageSmartPicker(workPackageID) {
+			const link = this.getWorkPackageLink(workPackageID)
+			this.$el.dispatchEvent(new CustomEvent('submit', { detail: link, bubbles: true }))
+		},
+		async linkWorkPackage(selectedOption) {
 			// since we can link multiple files now we send file information required in an array (whether it's only one value or multiple)
 			if (this.searchOrigin === WORKPACKAGES_SEARCH_ORIGIN.PROJECT_TAB) {
 				if (this.newWorkpackageCreated && this.searchOrigin === WORKPACKAGES_SEARCH_ORIGIN.PROJECT_TAB) {
@@ -245,17 +245,27 @@ export default {
 				}
 				await workpackageHelper.linkFileToWorkPackageWithSingleRequest([this.fileInfo], selectedOption, t('integration_openproject', 'Link to work package created successfully!'), this)
 				this.resetState()
-			} else if (this.searchOrigin === WORKPACKAGES_SEARCH_ORIGIN.LINK_MULTIPLE_FILES_MODAL) {
+				return
+			}
+
+			if (this.searchOrigin === WORKPACKAGES_SEARCH_ORIGIN.LINK_MULTIPLE_FILES_MODAL) {
 				if (this.fileInfo.length <= 20) {
 					await workpackageHelper.linkFileToWorkPackageWithSingleRequest(this.fileInfo, selectedOption, t('integration_openproject', 'Links to work package created successfully for selected files!'), this)
 					this.$emit('close', selectedOption)
 					this.resetState()
-				} else {
-					// the selected files will be linked in chunks
-					await workpackageHelper.linkMultipleFilesToWorkPackageWithChunking(this.fileInfo, selectedOption, false, this)
-					this.resetState()
+					return
 				}
+				// the selected files will be linked in chunks
+				await workpackageHelper.linkMultipleFilesToWorkPackageWithChunking(this.fileInfo, selectedOption, false, this)
+				this.resetState()
+			}
+		},
+		async selectWorkPackage(selectedOption) {
+			if (this.isSmartPicker) {
+				this.submitSelectedWorkPackageSmartPicker(selectedOption?.id)
+				return
 			}
+			await this.linkWorkPackage(selectedOption)
 		},
 		async makeSearchRequest(search, fileId) {
 			this.state = STATE.LOADING
diff --git a/src/reference.js b/src/reference.js
index 221d066b1..767949214 100644
--- a/src/reference.js
+++ b/src/reference.js
@@ -15,10 +15,10 @@ __webpack_nonce__ = btoa(OC.requestToken)
 /* eslint-disable-next-line no-undef */
 __webpack_public_path__ = OC.linkTo(APP_ID, 'js/')
 
-const widgetApps = new WeakMap()
+const workpackageCards = new WeakMap()
 // INFO: this is where we associate our widget component with the richobjects
 //       that we return in the reference provider.
-// Link preview card.
+// Link preview card in the chat.
 registerWidget(`${APP_ID}_work_package`, async (el, { richObjectType, richObject, accessible }) => {
 	// here we lazy load the components so it does not slow down the initial page load
 	const { createApp } = await import(/* webpackChunkName: "reference-wp-lazy" */'vue')
@@ -31,10 +31,10 @@ registerWidget(`${APP_ID}_work_package`, async (el, { richObjectType, richObject
 	})
 	setupGlobalProperties(widget)
 	widget.mount(el)
-	widgetApps.set(el, widget)
+	workpackageCards.set(el, widget)
 }, (el) => {
-	widgetApps.get(el)?.unmount()
-	widgetApps.delete(el)
+	workpackageCards.get(el)?.unmount()
+	workpackageCards.delete(el)
 })
 
 // INFO: register OpenProject work packages search component inside the Smart Picker.
@@ -43,10 +43,7 @@ registerCustomPickerElement('openproject-work-package-ref', async (el, { provide
 	const { createApp } = await import(/* webpackChunkName: "reference-picker-lazy" */'vue')
 	const { default: WorkPackagePickerElement } = await import(/* webpackChunkName: "reference-picker-lazy" */'./views/WorkPackagePickerElement.vue')
 
-	const app = createApp(WorkPackagePickerElement, {
-		providerId,
-		accessible,
-	})
+	const app = createApp(WorkPackagePickerElement)
 	setupGlobalProperties(app)
 	const vueElement = app.mount(el)
 
diff --git a/src/views/WorkPackagePickerElement.vue b/src/views/WorkPackagePickerElement.vue
index f2a8b4e93..a56582756 100644
--- a/src/views/WorkPackagePickerElement.vue
+++ b/src/views/WorkPackagePickerElement.vue
@@ -12,8 +12,7 @@
 			:is-smart-picker="true"
 			:file-info="fileInfo"
 			:is-disabled="isLoading || !enableSearchInput || !isStateOk"
-			:linked-work-packages="linkedWorkPackages"
-			@submit="onSubmit" />
+			:linked-work-packages="linkedWorkPackages" />
 		<div id="openproject-empty-content">
 			<NcLoadingIcon v-if="isLoading" class="loading-spinner" :size="90" />
 			<EmptyContent
@@ -44,18 +43,6 @@ export default {
 		SearchInput,
 		NcLoadingIcon,
 	},
-
-	props: {
-		providerId: {
-			type: String,
-			required: true,
-		},
-		accessible: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['submit'],
 	data() {
 		return {
 			fileInfo: {},
@@ -85,9 +72,6 @@ export default {
 		this.checkIfOpenProjectIsAvailable()
 	},
 	methods: {
-		onSubmit(data) {
-			this.$emit('submit', data)
-		},
 		async checkIfOpenProjectIsAvailable() {
 			if (!this.adminConfigState.isAdminConfigOk) {
 				this.state = STATE.ERROR

From e360faac315a1db5bd4e9f587c707b27c455adf4 Mon Sep 17 00:00:00 2001
From: Saw-jan <saw.jan.grg3e@gmail.com>
Date: Tue, 27 Oct 2026 10:29:37 +0545
Subject: [PATCH 3/4] chore: add changelog entry

Signed-off-by: Saw-jan <saw.jan.grg3e@gmail.com>
---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3bb803342..c5530153a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 
 ### Added
+
 - Support Nextcloud 35
 - Log integration settings saved through the setup API and every new Nextcloud OAuth client for OpenProject to the audit log
 - Log the project folder setup and terms of service signed for the OpenProject user to the audit log
@@ -21,9 +22,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Log files linked to and unlinked from OpenProject work packages to the audit log
 
 ### Fixed
+
 - Keep the admin settings when Nextcloud replays the migrations to check the database schema (`occ db:schema:check`, every `occ upgrade` on Nextcloud 35)
+- Selecting an OpenProject work package does not insert the reference [#1200](https://github.com/nextcloud/integration_openproject/pull/1200)
 
 ### Changed
+
 - Make OAuth2 Client class usage compatible with older Nextcloud versions [#1148](https://github.com/nextcloud/integration_openproject/pull/1148)
 - Add owner_file_name property in filesInfo endpoint response [#1189](https://github.com/nextcloud/integration_openproject/pull/1189)
 - Write the audit log entries through the admin_audit app, with an operation and named parameters, whenever the app is enabled

From b16a4bee5c748322a4ee6e4cc435f1aaaace158c Mon Sep 17 00:00:00 2001
From: Saw-jan <saw.jan.grg3e@gmail.com>
Date: Tue, 27 Oct 2026 17:39:20 +0545
Subject: [PATCH 4/4] fix: dispatch native DOM submit event

Vue3 removed the $on instance method, and $emit triggers component events rather than native DOM events.
Therefore, dispatch a native DOM event to notify external listeners.

Signed-off-by: Saw-jan <saw.jan.grg3e@gmail.com>
---
 CHANGELOG.md                           |  2 +-
 src/components/tab/SearchInput.vue     |  4 ++--
 src/reference.js                       | 10 +++++-----
 src/views/WorkPackagePickerElement.vue |  6 +++++-
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c5530153a..0c9aaa8a7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,7 +24,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Fixed
 
 - Keep the admin settings when Nextcloud replays the migrations to check the database schema (`occ db:schema:check`, every `occ upgrade` on Nextcloud 35)
-- Selecting an OpenProject work package does not insert the reference [#1200](https://github.com/nextcloud/integration_openproject/pull/1200)
+- Selecting an OpenProject work package does not insert the reference in the Smart Picker [#1200](https://github.com/nextcloud/integration_openproject/pull/1200)
 
 ### Changed
 
diff --git a/src/components/tab/SearchInput.vue b/src/components/tab/SearchInput.vue
index 157fc63ef..4fe83a36d 100644
--- a/src/components/tab/SearchInput.vue
+++ b/src/components/tab/SearchInput.vue
@@ -103,7 +103,7 @@ export default {
 			default: false,
 		},
 	},
-	emits: ['close'],
+	emits: ['submit', 'close'],
 	data: () => ({
 		state: STATE.OK,
 		searchResults: [],
@@ -232,7 +232,7 @@ export default {
 		}, DEBOUNCE_THRESHOLD),
 		submitSelectedWorkPackageSmartPicker(workPackageID) {
 			const link = this.getWorkPackageLink(workPackageID)
-			this.$el.dispatchEvent(new CustomEvent('submit', { detail: link, bubbles: true }))
+			this.$emit('submit', link)
 		},
 		async linkWorkPackage(selectedOption) {
 			// since we can link multiple files now we send file information required in an array (whether it's only one value or multiple)
diff --git a/src/reference.js b/src/reference.js
index 767949214..dc8e24448 100644
--- a/src/reference.js
+++ b/src/reference.js
@@ -15,8 +15,8 @@ __webpack_nonce__ = btoa(OC.requestToken)
 /* eslint-disable-next-line no-undef */
 __webpack_public_path__ = OC.linkTo(APP_ID, 'js/')
 
-const workpackageCards = new WeakMap()
-// INFO: this is where we associate our widget component with the richobjects
+const workPackageCards = new WeakMap()
+// INFO: this is where we associate our widget component with the rich-objects
 //       that we return in the reference provider.
 // Link preview card in the chat.
 registerWidget(`${APP_ID}_work_package`, async (el, { richObjectType, richObject, accessible }) => {
@@ -31,10 +31,10 @@ registerWidget(`${APP_ID}_work_package`, async (el, { richObjectType, richObject
 	})
 	setupGlobalProperties(widget)
 	widget.mount(el)
-	workpackageCards.set(el, widget)
+	workPackageCards.set(el, widget)
 }, (el) => {
-	workpackageCards.get(el)?.unmount()
-	workpackageCards.delete(el)
+	workPackageCards.get(el)?.unmount()
+	workPackageCards.delete(el)
 })
 
 // INFO: register OpenProject work packages search component inside the Smart Picker.
diff --git a/src/views/WorkPackagePickerElement.vue b/src/views/WorkPackagePickerElement.vue
index a56582756..bf363b5b3 100644
--- a/src/views/WorkPackagePickerElement.vue
+++ b/src/views/WorkPackagePickerElement.vue
@@ -12,7 +12,8 @@
 			:is-smart-picker="true"
 			:file-info="fileInfo"
 			:is-disabled="isLoading || !enableSearchInput || !isStateOk"
-			:linked-work-packages="linkedWorkPackages" />
+			:linked-work-packages="linkedWorkPackages"
+			@submit="onSubmit" />
 		<div id="openproject-empty-content">
 			<NcLoadingIcon v-if="isLoading" class="loading-spinner" :size="90" />
 			<EmptyContent
@@ -72,6 +73,9 @@ export default {
 		this.checkIfOpenProjectIsAvailable()
 	},
 	methods: {
+		onSubmit(data) {
+			this.$el.dispatchEvent(new CustomEvent('submit', { detail: data }))
+		},
 		async checkIfOpenProjectIsAvailable() {
 			if (!this.adminConfigState.isAdminConfigOk) {
 				this.state = STATE.ERROR