From 9662eb72640178edbd34f29d07e1f2f1093de203 Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Wed, 17 May 2023 19:01:16 +0200
Subject: [PATCH] Improve the logic of the select and select_search components

> There is no need for the two components to hold their `value` state.
It can be propagated from the component that uses them.
This will help 'clear' the search when modification is finished.
---
 .../vue/assign_items_to_tasks_modal/container.vue         | 3 +++
 app/javascript/vue/shared/select.vue                      | 5 ++---
 app/javascript/vue/shared/select_search.vue               | 8 ++++----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/javascript/vue/assign_items_to_tasks_modal/container.vue b/app/javascript/vue/assign_items_to_tasks_modal/container.vue
index b0f30b4f9..feb53a36f 100644
--- a/app/javascript/vue/assign_items_to_tasks_modal/container.vue
+++ b/app/javascript/vue/assign_items_to_tasks_modal/container.vue
@@ -39,6 +39,7 @@
             </label>
 
             <SelectSearch
+              :value="selectedProject"
               ref="projectsSelector"
               @change="changeProject"
               :options="projects"
@@ -65,6 +66,7 @@
             </label>
 
             <SelectSearch
+              :value="selectedExperiment"
               :disabled="!selectedProject"
               ref="experimentsSelector"
               @change="changeExperiment"
@@ -88,6 +90,7 @@
             </label>
 
             <SelectSearch
+              :value="selectedTask"
               :disabled="!selectedExperiment"
               ref="tasksSelector"
               @change="changeTask"
diff --git a/app/javascript/vue/shared/select.vue b/app/javascript/vue/shared/select.vue
index 8a3862184..27520e677 100644
--- a/app/javascript/vue/shared/select.vue
+++ b/app/javascript/vue/shared/select.vue
@@ -18,6 +18,7 @@
   export default {
     name: 'Select',
     props: {
+      value: { type: [String, Number] },
       options: { type: Array, default: () => [] },
       initialValue: { type: [String, Number] },
       placeholder: { type: String },
@@ -25,7 +26,6 @@
     },
     data() {
       return {
-        value: null,
         isOpen: false,
         optionPositionStyle: ''
       }
@@ -66,8 +66,7 @@
         }
       },
       setValue(value) {
-        this.value = value;
-        this.$emit('change', this.value);
+        this.$emit('change', value);
       },
       updateOptionPosition() {
         const container = this.$refs.container;
diff --git a/app/javascript/vue/shared/select_search.vue b/app/javascript/vue/shared/select_search.vue
index 88249ef97..7bdb79b55 100644
--- a/app/javascript/vue/shared/select_search.vue
+++ b/app/javascript/vue/shared/select_search.vue
@@ -1,5 +1,5 @@
 <template>
-  <Select class="sn-select--search" :options="currentOptions" :placeholder="placeholder" v-bind:disabled="disabled" @change="change" @blur="blur" @open="open" @close="close">
+  <Select class="sn-select--search" :value="value" :options="currentOptions" :placeholder="placeholder" v-bind:disabled="disabled" @change="change" @blur="blur" @open="open" @close="close">
     <input ref="focusElement" v-model="query" type="text" class="sn-select__search-input" :placeholder="searchPlaceholder" />
     <span class="sn-select__value">{{ valueLabel || (placeholder || i18n.t('general.select')) }}</span>
     <span class="sn-select__caret caret"></span>
@@ -12,6 +12,7 @@
   export default {
     name: 'SelectSearch',
     props: {
+      value: { type: [String, Number] },
       options: { type: Array, default: () => [] },
       optionsUrl: { type: String },
       placeholder: { type: String },
@@ -21,7 +22,6 @@
     components: { Select },
     data() {
       return {
-        value: null,
         query: null,
         currentOptions: null,
         isOpen: false
@@ -59,15 +59,15 @@
         this.$emit('blur');
       },
       change(value) {
-        this.value = value;
         this.isOpen = false;
-        this.$emit('change', this.value);
+        this.$emit('change', value);
       },
       open() {
         this.isOpen = true;
         this.$emit('open');
       },
       close() {
+        this.query = '';
         this.isOpen = false;
         this.$emit('close');
       },