Intuitive output on the point-of-sale product search panel (#1024)

* Intuitive output on the point-of-sale product search panel

* Update index.vue

Co-authored-by: elsiosanchez <elsiossanches@gmail.com>

src/components/ADempiere/Form/VPOS/ProductInfo/index.vue

@@ -21,10 +21,15 @@
       <template slot="label">
         {{ $t('form.productInfo.codeProduct') }}
         <el-popover
+          v-model="visible"
+          v-shortkey="keyShortcuts"
           placement="right"
           trigger="click"
           width="800"
+          @shortkey.native="close"
         >
+          <el-button icon="el-icon-close" type="text" style="float: right;padding: 1% 1% 0px 0px;font-size: 20px;" @click="close" />
+          <br>
           <product-info-list />
           <el-button
             slot="reference"
@@ -106,6 +111,7 @@ export default {
   },
   data() {
     return {
+      visible: false,
       timeOut: null
     }
   },
@@ -207,6 +213,9 @@ export default {
       // call callback function to return suggestions
       callBack(results)
     },
+    close() {
+      this.visible = false
+    },
     handleSelect(elementSelected) {
       const valueProduct = this.isEmptyValue(elementSelected.product) ? elementSelected.value : elementSelected.product.value
       this.$store.dispatch('notifyActionKeyPerformed', {

src/components/ADempiere/Form/VPOS/ProductInfo/productList.vue

@@ -18,6 +18,7 @@
 <template>
   <el-main
     v-shortkey="shortsKey"
+    style="padding-top: 0px;"
     @shortkey.native="keyAction"
   >
     <el-form