From fabb719163bfe4ed34a82ffff03e0ecb9ae0ebeb Mon Sep 17 00:00:00 2001
From: Kelani Tolulope <kelanik8@gmail.com>
Date: Mon, 17 Apr 2023 14:09:40 +0100
Subject: [PATCH] Add clearer add option to select module field configurator

---
 .../ModuleFields/Configurator/Select.vue      | 50 ++++++-------------
 .../components/ModuleFields/Editor/Select.vue |  4 +-
 2 files changed, 18 insertions(+), 36 deletions(-)

diff --git a/client/web/compose/src/components/ModuleFields/Configurator/Select.vue b/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
index 4b78a058c..95fc4d092 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
@@ -42,39 +42,18 @@
             </b-button>
           </b-input-group-append>
         </b-input-group>
-
-        <b-input-group>
-          <b-form-input
-            v-model.trim="newOption.value"
-            plain
-            size="sm"
-            :placeholder="$t('kind.select.optionValuePlaceholder')"
-            :state="newOptState"
-            @keypress.enter.prevent="handleAddOption"
-          />
-
-          <b-form-input
-            v-model.trim="newOption.text"
-            plain
-            size="sm"
-            :placeholder="$t('kind.select.optionLabelPlaceholder')"
-            :state="newOptState"
-            @keypress.enter.prevent="handleAddOption"
-          />
-
-          <b-input-group-append>
-            <b-button
-              variant="primary"
-              size="sm"
-              :disabled="newOptState === false || newEmpty"
-              @click.prevent="handleAddOption"
-            >
-              + {{ $t('kind.select.optionAdd') }}
-            </b-button>
-          </b-input-group-append>
-        </b-input-group>
       </b-form-group>
 
+      <div class="my-2">
+        <b-button
+          variant="primary px-3"
+          size="md"
+          @click.prevent="handleAddOption"
+        >
+          + {{ $t('kind.select.optionAdd') }}
+        </b-button>
+      </div>
+
       <b-form-group
         v-if="f.isMulti"
       >
@@ -162,10 +141,11 @@ export default {
 
   methods: {
     handleAddOption () {
-      if (this.newOption.value) {
-        this.f.options.options.push(this.newOption)
-        this.newOption = { value: undefined, text: undefined, new: true }
-      }
+      this.f.options.options.push({
+        value: undefined,
+        text: undefined,
+        new: true,
+      })
     },
 
     onUpdateIsUniqueMultiValue () {
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Select.vue b/client/web/compose/src/components/ModuleFields/Editor/Select.vue
index 838f16f0b..8a839d016 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Select.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Select.vue
@@ -113,7 +113,9 @@ export default {
           ? this.value === o.value
           : (this.value || []).includes(o.value)
         return { ...o, disabled }
-      }).filter(({ value = '' }) => value)
+      }).filter(({ value = '', text = '' }) => {
+        return value !== '' || text !== ''
+      })
     },
   },