Fix request body key type dropdown in Firefox.

Closes #44
davidhsianturi · Dec 13, 2019 · b805097 · b805097
1 parent 7806673
commit b805097
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 27 deletions.
diff --git a/resources/js/base.js b/resources/js/base.js
@@ -4,8 +4,8 @@ import { REQUEST_BODY_OPTIONS } from './constants';
 export default {
     data() {
         return {
-            hoverId: null,
-            hoverTimer: null,
+            elementId: null,
+            waitingTime: null,
         };
     },
 
@@ -90,13 +90,13 @@ export default {
         },
 
         /**
-         * The mouseOver and mouseOut event target in element.
+         * The mouseOver/mouseOut event target in element.
          */
-        hoverInElement(val) {
-            window.clearTimeout(this.hoverTimer);
+        activateElmnt(val) {
+            window.clearTimeout(this.waitingTime);
 
-            this.hoverTimer = window.setTimeout(() => {
-                this.hoverId = val;
+            this.waitingTime = window.setTimeout(() => {
+                this.elementId = val;
             }, 100);
         },
 

diff --git a/resources/js/components/RequestTabs.vue b/resources/js/components/RequestTabs.vue
@@ -254,8 +254,8 @@ export default {
                     <tbody class="align-middle">
                         <tr v-for="(header, row) in headers"
                             :key="row"
-                            @mouseover="hoverInElement('header#' + row)"
-                            @mouseout="hoverInElement(false)">
+                            @mouseover="activateElmnt('header#' + row)"
+                            @mouseout="activateElmnt(null)">
                             <td class="border-t border-gray-200 text-xs text-gray-800 text-center">
                                 <input type="checkbox"
                                     v-model="header.included"
@@ -280,7 +280,7 @@ export default {
                                     v-model="header.description">
 
                                 <span v-if="!header.new">
-                                    <a v-show="hoverId==='header#' + row"
+                                    <a v-show="elementId==='header#' + row"
                                         href="#"
                                         class="font-bold absolute inset-y-0 right-0 flex items-center pr-3"
                                         @click="removeRow(headers, row)">

diff --git a/resources/js/components/request/BodyFormUrlEncoded.vue b/resources/js/components/request/BodyFormUrlEncoded.vue
@@ -50,8 +50,8 @@ export default {
         <tbody class="align-baseline">
             <tr v-for="(reqBody, row) in content"
                 :key="row"
-                @mouseover="hoverInElement('body#' + row)"
-                @mouseout="hoverInElement(false)">
+                @mouseover="activateElmnt('body#' + row)"
+                @mouseout="activateElmnt(null)">
                 <td class="border-t border-gray-200 text-xs text-gray-800 text-center">
                     <input type="checkbox"
                         v-model="reqBody.included"
@@ -76,7 +76,7 @@ export default {
                         placeholder="Description"
                         v-model="reqBody.description">
 
-                    <a v-show="hoverId==='body#' + row && !reqBody.new"
+                    <a v-show="elementId==='body#' + row && !reqBody.new"
                         href="#"
                         class="font-bold absolute inset-y-0 right-0 flex items-center pr-3"
                         @click="removeRow(row)">

diff --git a/resources/js/components/request/BodyMultipartForm.vue b/resources/js/components/request/BodyMultipartForm.vue
@@ -1,9 +1,11 @@
 <script>
+import vSelect from 'vue-multiselect';
 import FilesInput from '../FilesInput';
 
 export default {
     components: {
-        'files-input': FilesInput
+        'v-select': vSelect,
+        'files-input': FilesInput,
     },
 
     props: {
@@ -57,28 +59,29 @@ export default {
         <tbody class="align-baseline">
             <tr v-for="(reqBody, row) in content"
                 :key="row"
-                @mouseover="hoverInElement('body#' + row)"
-                @mouseout="hoverInElement(false)">
+                @mouseover="activateElmnt('body#' + row)"
+                @mouseout="activateElmnt(null)">
                 <td class="border-t border-gray-200 text-xs text-gray-800 text-center">
                     <input type="checkbox"
                         v-model="reqBody.included"
                         :class="reqBody.new ? 'hidden' : ''">
                 </td>
                 <td class="p-2 border-l border-t border-gray-200 text-xs text-gray-800 relative">
                     <input type="text"
-                        class="mt-0 mb-0 appearance-none focus:outline-none block w-full"
+                        class="mt-0 mb-0 appearance-none focus:outline-none w-full"
                         placeholder="Key"
                         v-model="reqBody.key"
                         @input="handleInput(row, reqBody)">
 
-                    <div v-show="hoverId==='body#' + row">
-                        <select v-model="reqBody.type" class="capitalize rounded-none appearance-none absolute inset-y-0 right-0 flex items-center bg-white text-gray-500 leading-tight focus:outline-none pr-6">
-                            <option>text</option>
-                            <option>file</option>
-                        </select>
-                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
-                            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
-                        </div>
+                    <div v-show="elementId==='body#' + row" class="w-1/4 absolute inset-y-0 right-0">
+                        <v-select
+                            class="min-vs capitalize text-gray-500 text-xs"
+                            v-model="reqBody.type"
+                            openDirection="bottom"
+                            :allowEmpty="false"
+                            :showLabels="false"
+                            :searchable="false"
+                            :options="['text','file']"></v-select>
                     </div>
                 </td>
                 <td class="p-2 border-l border-t border-gray-200 text-xs text-gray-800">
@@ -92,11 +95,11 @@ export default {
                 </td>
                 <td class="p-2 border-l border-t border-gray-200 text-xs text-gray-800 relative">
                     <input type="text"
-                        class="mt-0 mb-0 appearance-none focus:outline-none block w-full"
+                        class="mt-0 mb-0 appearance-none focus:outline-none w-full"
                         placeholder="Description"
                         v-model="reqBody.description">
 
-                    <a v-show="hoverId==='body#' + row && !reqBody.new"
+                    <a v-show="elementId==='body#' + row && !reqBody.new"
                         href="#"
                         class="font-bold absolute inset-y-0 right-0 flex items-center pr-3"
                         @click="removeRow(row)">