From 79181f11dd80903e2b8390cc51df5ef44764827f Mon Sep 17 00:00:00 2001
From: Parajuli Kiran <kiranparajuli589@gmail.com>
Date: Mon, 21 Mar 2022 13:47:29 +0545
Subject: [PATCH 1/2] reset search input state if fileInfo prop has changed

Signed-off-by: Parajuli Kiran <kiranparajuli589@gmail.com>
---
 src/components/tab/SearchInput.vue            | 13 +++++++--
 tests/jest/components/tab/SearchInput.spec.js | 28 +++++++++++++++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/components/tab/SearchInput.vue b/src/components/tab/SearchInput.vue
index ea1d076f8..a96467e46 100644
--- a/src/components/tab/SearchInput.vue
+++ b/src/components/tab/SearchInput.vue
@@ -1,6 +1,7 @@
 <template>
 	<div id="searchBar">
-		<Multiselect class="searchInput"
+		<Multiselect id="search-input"
+			class="searchInput"
 			:placeholder="placeholder"
 			:options="searchResults"
 			:user-select="true"
@@ -79,6 +80,15 @@ export default {
 			return ''
 		},
 	},
+	watch: {
+		fileInfo(oldFile, newFile) {
+			if (oldFile.id !== newFile.id) {
+				this.selectedId = []
+				this.resetState()
+				document.getElementById('search-input').value = ''
+			}
+		},
+	},
 	methods: {
 		resetState() {
 			this.searchResults = []
@@ -152,7 +162,6 @@ export default {
 				} catch (e) {
 					console.error('could not process workpackage data')
 				}
-
 			}
 		},
 	},
diff --git a/tests/jest/components/tab/SearchInput.spec.js b/tests/jest/components/tab/SearchInput.spec.js
index 8574d2ae9..07ff9005a 100644
--- a/tests/jest/components/tab/SearchInput.spec.js
+++ b/tests/jest/components/tab/SearchInput.spec.js
@@ -21,7 +21,7 @@ describe('SearchInput.vue tests', () => {
 
 	const stateSelector = '.stateMsg'
 	const searchListSelector = '.workpackage'
-	const inputSelector = '.multiselect__input'
+	const inputSelector = '#search-input'
 	const assigneeSelector = '.filterAssignee'
 	const loadingIconSelector = '.icon-loading-small'
 	const multiSelectItemSelector = '.multiselect__option'
@@ -227,10 +227,34 @@ describe('SearchInput.vue tests', () => {
 				showErrorSpy.mockRestore()
 			})
 		})
+
+		describe('fileInfo prop', () => {
+			it('should reset the input state when the prop is changed', async () => {
+				jest.spyOn(axios, 'get')
+					.mockImplementationOnce(() => Promise.resolve({
+						status: 200,
+						data: [],
+					}))
+				wrapper = mountSearchInput({ id: 111, name: 'file.txt' })
+				const inputField = wrapper.find(inputSelector)
+				await inputField.setValue('orga')
+				const spyDocument = jest.spyOn(document, 'getElementById')
+					.mockImplementationOnce(() => ({
+						value: 'orga',
+					}))
+				await wrapper.setProps({
+					fileInfo: { id: 222, name: 'file2.txt' },
+				})
+				expect(spyDocument).toBeCalledWith('search-input')
+				expect(wrapper.vm.selectedId).toMatchObject([])
+				expect(wrapper.vm.searchResults).toMatchObject([])
+				expect(wrapper.vm.state).toBe('ok')
+			})
+		})
 	})
 })
 
-function mountSearchInput(fileInfo = { }) {
+function mountSearchInput(fileInfo = {}) {
 	return mount(SearchInput, {
 		localVue,
 		mocks: {

From b0ab9b277a44b58f0166d76ec734aaed6aebdb5a Mon Sep 17 00:00:00 2001
From: Kiran Parajuli <kiranparajuli589@gmail.com>
Date: Tue, 22 Mar 2022 13:09:09 +0545
Subject: [PATCH 2/2] Use refs to clear multiselect search input

Signed-off-by: Kiran Parajuli <kiranparajuli589@gmail.com>
---
 src/components/tab/SearchInput.vue            |  7 ++++--
 tests/jest/components/tab/SearchInput.spec.js | 25 ++++++++-----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/tab/SearchInput.vue b/src/components/tab/SearchInput.vue
index a96467e46..7f29c7f50 100644
--- a/src/components/tab/SearchInput.vue
+++ b/src/components/tab/SearchInput.vue
@@ -1,6 +1,6 @@
 <template>
 	<div id="searchBar">
-		<Multiselect id="search-input"
+		<Multiselect ref="workPackageMultiSelect"
 			class="searchInput"
 			:placeholder="placeholder"
 			:options="searchResults"
@@ -85,7 +85,10 @@ export default {
 			if (oldFile.id !== newFile.id) {
 				this.selectedId = []
 				this.resetState()
-				document.getElementById('search-input').value = ''
+				// FIXME: https://github.com/shentao/vue-multiselect/issues/633
+				if (this.$refs.workPackageMultiSelect?.$refs?.VueMultiselect?.search) {
+					this.$refs.workPackageMultiSelect.$refs.VueMultiselect.search = ''
+				}
 			}
 		},
 	},
diff --git a/tests/jest/components/tab/SearchInput.spec.js b/tests/jest/components/tab/SearchInput.spec.js
index 07ff9005a..bc5f5c312 100644
--- a/tests/jest/components/tab/SearchInput.spec.js
+++ b/tests/jest/components/tab/SearchInput.spec.js
@@ -21,7 +21,7 @@ describe('SearchInput.vue tests', () => {
 
 	const stateSelector = '.stateMsg'
 	const searchListSelector = '.workpackage'
-	const inputSelector = '#search-input'
+	const inputSelector = '.multiselect__input'
 	const assigneeSelector = '.filterAssignee'
 	const loadingIconSelector = '.icon-loading-small'
 	const multiSelectItemSelector = '.multiselect__option'
@@ -230,22 +230,20 @@ describe('SearchInput.vue tests', () => {
 
 		describe('fileInfo prop', () => {
 			it('should reset the input state when the prop is changed', async () => {
-				jest.spyOn(axios, 'get')
-					.mockImplementationOnce(() => Promise.resolve({
-						status: 200,
-						data: [],
-					}))
 				wrapper = mountSearchInput({ id: 111, name: 'file.txt' })
-				const inputField = wrapper.find(inputSelector)
-				await inputField.setValue('orga')
-				const spyDocument = jest.spyOn(document, 'getElementById')
-					.mockImplementationOnce(() => ({
-						value: 'orga',
-					}))
+				await wrapper.find(inputSelector).setValue('org')
+				await wrapper.setData({
+					searchResults: [{
+						id: 999,
+					}],
+					selectedId: ['999'],
+					state: 'pending',
+				})
 				await wrapper.setProps({
 					fileInfo: { id: 222, name: 'file2.txt' },
 				})
-				expect(spyDocument).toBeCalledWith('search-input')
+				const inputField = wrapper.find(inputSelector)
+				expect(inputField.element.value).toBe('')
 				expect(wrapper.vm.selectedId).toMatchObject([])
 				expect(wrapper.vm.searchResults).toMatchObject([])
 				expect(wrapper.vm.state).toBe('ok')
@@ -253,7 +251,6 @@ describe('SearchInput.vue tests', () => {
 		})
 	})
 })
-
 function mountSearchInput(fileInfo = {}) {
 	return mount(SearchInput, {
 		localVue,