diff --git a/src/components/tab/SearchInput.vue b/src/components/tab/SearchInput.vue
index 692c26525..e98b0ce53 100644
--- a/src/components/tab/SearchInput.vue
+++ b/src/components/tab/SearchInput.vue
@@ -30,6 +30,7 @@
 </template>
 
 <script>
+import _ from 'lodash'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { translate as t } from '@nextcloud/l10n'
@@ -38,8 +39,6 @@ import WorkPackage from './WorkPackage'
 import { showError } from '@nextcloud/dialogs'
 import { workpackageHelper } from '../../utils/workpackageHelper'
 
-const _ = require('lodash')
-
 const STATE_OK = 'ok'
 const STATE_ERROR = 'error'
 const STATE_NO_TOKEN = 'no-token'
@@ -113,20 +112,14 @@ export default {
 			}
 		},
 		async asyncFind(query) {
-			// save current query to check if we display
-			// recommendations or search results
-			console.log(query)
 			query = query.trim()
 			if (query) {
 				this.resetState()
 				if (query.length <= SEARCH_CHAR_LIMIT) return
-				await this.debounceGetWorkPackages(query)
+				await this.debounceMakeSearchRequest(query)
 			}
 		},
-		/**
-		 * debounce get work packages to avoid too many requests
-		 */
-		debounceGetWorkPackages: _.debounce(function(...args) {
+		debounceMakeSearchRequest: _.debounce(function(...args) {
 			return this.makeSearchRequest(...args)
 		}, 500),
 		async linkWorkPackageToFile(selectedOption) {
diff --git a/src/utils/workpackageHelper.js b/src/utils/workpackageHelper.js
index d338f88cd..2749089c6 100644
--- a/src/utils/workpackageHelper.js
+++ b/src/utils/workpackageHelper.js
@@ -41,16 +41,13 @@ export const workpackageHelper = {
 		const typeId = this.replaceHrefToGetId(workPackage._links.type.href)
 		const userId = this.replaceHrefToGetId(workPackage._links.assignee.href)
 		const userName = workPackage._links.assignee.title
-
 		const avatarUrl = generateUrl('/apps/integration_openproject/avatar?')
 			+ encodeURIComponent('userId')
 			+ '=' + userId
 			+ '&' + encodeURIComponent('userName')
 			+ '=' + userName
 		const statusColor = await this.getColorAttributes('/apps/integration_openproject/statuses/', statusId)
-		console.log(statusColor)
 		const typeColor = await this.getColorAttributes('/apps/integration_openproject/types/', typeId)
-
 		return {
 			id: workPackage.id,
 			subject: workPackage.subject,
diff --git a/tests/jest/components/tab/SearchInput.spec.js b/tests/jest/components/tab/SearchInput.spec.js
index ef5096b7e..24b90d0b1 100644
--- a/tests/jest/components/tab/SearchInput.spec.js
+++ b/tests/jest/components/tab/SearchInput.spec.js
@@ -15,6 +15,8 @@ jest.mock('@nextcloud/l10n', () => ({
 	getLanguage: jest.fn(() => ''),
 }))
 
+jest.mock('lodash', () => ({ ...jest.requireActual('lodash'), debounce: fn => { fn.cancel = jest.fn(); return fn } }))
+
 const localVue = createLocalVue()
 const simpleWorkPackageSearchResponse = [{
 	id: 1,
@@ -43,7 +45,8 @@ describe('SearchInput.vue tests', () => {
 	let wrapper
 
 	const stateSelector = '.stateMsg'
-	const searchListSelector = '.workpackage'
+	const multiSelectContentSelector = '.multiselect__content'
+	const workPackageStubSelector = 'workpackage-stub'
 	const inputSelector = '.multiselect__input'
 	const assigneeSelector = '.filterAssignee'
 	const loadingIconSelector = '.icon-loading-small'
@@ -159,17 +162,18 @@ describe('SearchInput.vue tests', () => {
 				await wrapper.setData({
 					searchResults: [],
 				})
-				const searchList = wrapper.find(searchListSelector)
-				expect(searchList.exists()).toBeFalsy()
+				const multiSelectCont = wrapper.find(multiSelectContentSelector)
+				expect(multiSelectCont).toMatchSnapshot()
 			})
 			it('should display correct options list of search results', async () => {
 				await wrapper.setData({
 					searchResults: workPackagesSearchResponse,
 				})
-				const searchList = wrapper.find(searchListSelector)
-
-				expect(searchList.exists()).toBeTruthy()
-				expect(searchList).toMatchSnapshot()
+				const multiSelectContent = wrapper.find(multiSelectContentSelector)
+				expect(multiSelectContent.exists()).toBeTruthy()
+				const workPackages = multiSelectContent.findAll(workPackageStubSelector)
+				expect(workPackages).toHaveLength(workPackagesSearchResponse.length)
+				expect(workPackages.at(0).props()).toMatchSnapshot()
 			})
 			it('should not display the "avatar" and "name" if the "assignee" is not present in a work package', async () => {
 				await wrapper.setData({
@@ -178,11 +182,11 @@ describe('SearchInput.vue tests', () => {
 				const assignee = wrapper.find(assigneeSelector)
 				expect(assignee.exists()).toBeFalsy()
 			})
-			it.only('should only use the options from the latest search response', async () => {
+			it('should only use the options from the latest search response', async () => {
 				await wrapper.setData({
 					searchResults: workPackageSearchReqResponse,
 				})
-				expect(wrapper.findAll('workpackage-stub').length).toBe(3)
+				expect(wrapper.findAll(workPackageStubSelector).length).toBe(3)
 				const axiosSpy = jest.spyOn(axios, 'get')
 					.mockImplementationOnce(() => Promise.resolve({
 						status: 200,
@@ -196,7 +200,7 @@ describe('SearchInput.vue tests', () => {
 				for (let i = 0; i <= 10; i++) {
 					await wrapper.vm.$nextTick()
 				}
-				const workPackages = wrapper.findAll('workpackage-stub')
+				const workPackages = wrapper.findAll(workPackageStubSelector)
 				expect(workPackages.length).toBe(simpleWorkPackageSearchResponse.length)
 				expect(workPackages.at(0).props()).toMatchSnapshot()
 				axiosSpy.mockRestore()
@@ -427,7 +431,7 @@ function mountSearchInput(fileInfo = {}, linkedWorkPackages = []) {
 		},
 		propsData: {
 			fileInfo,
-			linkedWorkPackages
+			linkedWorkPackages,
 		},
 	})
 }
diff --git a/tests/jest/components/tab/__snapshots__/SearchInput.spec.js.snap b/tests/jest/components/tab/__snapshots__/SearchInput.spec.js.snap
index 3902d375c..773f701b8 100644
--- a/tests/jest/components/tab/__snapshots__/SearchInput.spec.js.snap
+++ b/tests/jest/components/tab/__snapshots__/SearchInput.spec.js.snap
@@ -19,35 +19,29 @@ exports[`SearchInput.vue tests state messages no-token: should display the corre
 `;
 
 exports[`SearchInput.vue tests work packages multiselect search list should display correct options list of search results 1`] = `
-<div class="workpackage">
-  <div class="row">
-    <div class="row__status" style="background-color: blue;">
-      <div class="row__status__title">
-        in-progress
-      </div>
-    </div>
-    <div class="row__workpackage">
-      #1 - test
-    </div>
-  </div>
-  <div class="row">
-    <div class="row__subject"><span class="row__subject__type" style="color: red;">
-				task
-			</span>
-      Organize work-packages
-    </div>
-  </div>
-  <div class="row">
-    <div class="row__assignee">
-      <div class="row__assignee__avatar">
-        <avatar-stub size="23" url="/server/index.php/apps/integration_openproject/avatar?userId=1&amp;userName=System" user="test" display-name="test" class="item-avatar"></avatar-stub>
-      </div>
-      <div class="row__assignee__assignee">
-        test
-      </div>
-    </div>
-  </div>
-</div>
+Object {
+  "workpackage": Object {
+    "assignee": "test",
+    "id": "1",
+    "picture": "/server/index.php/apps/integration_openproject/avatar?userId=1&userName=System",
+    "project": "test",
+    "statusCol": "blue",
+    "statusTitle": "in-progress",
+    "subject": "Organize work-packages",
+    "typeCol": "red",
+    "typeTitle": "task",
+  },
+}
+`;
+
+exports[`SearchInput.vue tests work packages multiselect search list should not be displayed if the search results is empty 1`] = `
+<ul class="multiselect__content" style="display: block;">
+  <!---->
+  <li style="display: none;"><span class="multiselect__option"><span>No results</span></span></li>
+  <li><span class="multiselect__option">
+			Start typing to search
+		</span></li>
+</ul>
 `;
 
 exports[`SearchInput.vue tests work packages multiselect search list should only use the options from the latest search response 1`] = `