change interactedOnce behavior

src/web/price-check/CheckedItem.vue

@@ -13,21 +13,21 @@
       :filters="itemFilters"
       :stats="itemStats"
       :item="item"
-      @submit="intaractedOnce = true" />
+      @submit="interactedOnce = true" />
     <trade-listing
-      v-if="tradeAPI === 'trade' && intaractedOnce"
+      v-if="tradeAPI === 'trade' && interactedOnce"
       ref="tradeService"
       :filters="itemFilters"
       :stats="itemStats"
       :item="item" />
-    <div v-if="tradeAPI === 'trade' && !intaractedOnce">
-      <button class="btn" @click="intaractedOnce = true">{{ $t('Search') }}</button>
-    </div>
     <trade-bulk
-      v-if="tradeAPI === 'bulk'"
+      v-if="tradeAPI === 'bulk' && interactedOnce"
       ref="tradeService"
       :filters="itemFilters"
       :item="item" />
+    <div v-if="!interactedOnce" @mouseenter="interactedOnce = true">
+      <button class="btn" @click="interactedOnce = true">{{ $t('Search') }}</button>
+    </div>
   </div>
 </template>
 
@@ -56,20 +56,20 @@ export default {
     FilterName
   },
   created () {
-    this.$watch(vm => [vm.itemFilters, vm.itemStats, vm.intaractedOnce], (curr, prev) => {
+    this.$watch(vm => [vm.item, vm.interactedOnce], (curr, prev) => {
+      if (this.interactedOnce === false) return
+
       this.tradeAPI = apiToSatisfySearch(this.item, this.itemStats)
 
-      if (this.intaractedOnce === false) return
-
-      // NOTE: children component receives props on nextTick
+      // NOTE: child `trade-xxx` component renders/receives props on nextTick
       this.$nextTick(() => {
         if (this.$refs.tradeService) {
           this.$refs.tradeService.execSearch()
         }
       })
-    }, { deep: true })
+    }, { deep: false })
 
-    this.$watch(vm => [vm.itemStats, vm.intaractedOnce], (curr, prev) => {
+    this.$watch(vm => [vm.item, vm.interactedOnce, vm.itemStats, vm.itemFilters], (curr, prev) => {
       const cItem = curr[0]
       const pItem = prev[0]
       const cIntaracted = curr[1]
@@ -77,17 +77,7 @@ export default {
 
       if (cItem === pItem && cIntaracted === true && pIntaracted === true) {
         // force user to press Search button on change
-        this.intaractedOnce = false
-      }
-    }, { deep: true })
-
-    this.$watch(vm => [vm.itemFilters, vm.intaractedOnce], (curr, prev) => {
-      const cItem = curr[0]
-      const pItem = prev[0]
-      const cIntaracted = curr[1]
-      const pIntaracted = prev[1]
-      if (cItem === pItem && cIntaracted === false && pIntaracted === false) {
-        this.intaractedOnce = true
+        this.interactedOnce = false
       }
     }, { deep: true })
   },
@@ -101,7 +91,7 @@ export default {
     item (item) {
       this.itemFilters = createFilters(item)
       this.itemStats = initUiModFilters(item)
-      this.intaractedOnce = (
+      this.interactedOnce = (
         this.item.rarity === ItemRarity.Unique ||
         !CATEGORY_TO_TRADE_ID.has(this.item.category) ||
         Boolean(this.item.isUnidentified) ||
@@ -113,7 +103,7 @@ export default {
     return {
       itemFilters: null,
       itemStats: null,
-      intaractedOnce: false,
+      interactedOnce: false,
       tradeAPI: 'bulk'
     }
   },

src/web/price-check/filters/FilterNumericEditable.vue

@@ -2,8 +2,12 @@
   <div v-if="filter"
     class="trade-tag trade-tag--box flex" :class="{ disabled: filter.disabled }">
     <button @click="filter.disabled = !filter.disabled" class="pl-2">{{ $t(name) }}</button>
-    <ui-input-debounced class="trade-tag__input" :placeholder="filter.value" step="any" type="number"
-      v-model.number="filterValue" :delay="577" />
+    <ui-input-debounced class="trade-tag__input" step="any" type="number"
+      v-model.number="filterValue"
+      :placeholder="filter.value"
+      :delay="0"
+      @focus.native="inputFocus"
+      :style="`width: ${1.2 + String(filterValue).length}ch`" />
   </div>
 </template>
 
@@ -33,6 +37,15 @@ export default {
         }
       }
     }
+  },
+  methods: {
+    inputFocus (e) {
+      if (e.target.value === '') {
+        e.target.value = this.filter.value
+      }
+      e.target.select()
+      this.filter.disabled = false
+    }
   }
 }
 </script>
@@ -40,9 +53,8 @@ export default {
 <style lang="postcss">
 .trade-tag__input {
   @apply text-center;
-  @apply w-6;
   @apply mr-1;
-  @apply bg-gray-900;
+  @apply bg-transparent;
   @apply text-gray-300;
   @apply select-all;
 
@@ -54,7 +66,11 @@ export default {
   }
 
   &::placeholder {
-    @apply text-gray-700;
+    @apply text-gray-300;
+  }
+
+  &:focus::placeholder {
+    color: transparent;
   }
 }
 </style>

src/web/price-check/filters/FiltersBlock.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex flex-wrap items-center mb-2 -m-1">
+    <div class="flex flex-wrap items-center mb-2 -m-1" @mouseleave="handleMouseLeaveStats">
       <button v-if="filters.linkedSockets" class="trade-tag" :class="{ disabled: filters.linkedSockets.disabled }"
         @click="filters.linkedSockets.disabled = !filters.linkedSockets.disabled">{{ $t('Links: {0}', [filters.linkedSockets.value]) }}</button>
       <div v-if="filters.mapTier" class="trade-tag">{{ $t('Map Tier: {0}', [filters.mapTier.value]) }}</div>