From 45b9f2e1bf13a285d7d7436ddcea80707e16ee32 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 6 Jun 2021 20:56:56 +0530
Subject: [PATCH] fix: replace auto complete with drop down for content-types -
 fixed #1704

---
 assets/scss/styles.scss |  5 ++---
 pages/index.vue         | 32 +++++++++++++++++++++++++++++---
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 1e01621dc..7f58b9f93 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -441,7 +441,7 @@ input[type="radio"],
   @apply flex-1;
 }
 
-.method,
+.drop-down-input,
 .url-field,
 kbd,
 select,
@@ -470,9 +470,8 @@ code {
   }
 }
 
-.method {
+.drop-down-input {
   @apply cursor-pointer;
-  @apply uppercase;
   @apply rounded-none;
 
   min-width: 128px;
diff --git a/pages/index.vue b/pages/index.vue
index aab8bbf81..1fdcb4881 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,7 +11,7 @@
                 <v-popover>
                   <input
                     id="method"
-                    class="method"
+                    class="drop-down-input"
                     v-model="method"
                     :readonly="!customMethod"
                     autofocus
@@ -85,12 +85,38 @@
             <ul>
               <li>
                 <label for="contentType" class="text-sm">{{ $t("content_type") }}</label>
-                <SmartAutoComplete
+                <span class="select-wrapper">
+                  <v-popover>
+                    <input
+                      id="contentType"
+                      class="drop-down-input"
+                      v-model="contentType"
+                      readonly
+                    />
+                    <template slot="popover">
+                      <div
+                        v-for="(contentTypeMenuItem, index) in validContentTypes"
+                        :key="`content-type-${index}`"
+                      >
+                        <button
+                          class="icon"
+                          @click="
+                            contentType = contentTypeMenuItem
+                          "
+                          v-close-popover
+                        >
+                          {{ contentTypeMenuItem }}
+                        </button>
+                      </div>
+                    </template>
+                  </v-popover>
+                </span>
+                <!-- <SmartAutoComplete
                   :source="validContentTypes"
                   :spellcheck="false"
                   v-model="contentType"
                   styles="text-sm"
-                />
+                /> -->
               </li>
             </ul>
             <ul>