fix: replace auto complete with drop down for content-types - fixed #1704

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;

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>