Fix shop item popover staying open after click (#12921)

* don't refocus shopItem popover on click

* fix webpack compile error

* manually disable and enable popover

* clean up old changes

website/client/src/app.vue

@@ -261,6 +261,12 @@ export default {
       this.$root.$emit('bv::show::modal', 'buy-modal');
     });
 
+    this.$root.$on('bv::modal::hidden', event => {
+      if (event.componentId === 'buy-modal') {
+        this.$root.$emit('buyModal::hidden', this.selectedItemToBuy.key);
+      }
+    });
+
     this.$root.$on('selectMembersModal::showItem', item => {
       this.selectedSpellToBuy = item;
       this.$root.$emit('bv::show::modal', 'select-member-modal');

website/client/src/components/shops/quests/index.vue

@@ -513,6 +513,12 @@ export default {
       section: this.$t('shops'),
     });
     await this.$store.dispatch('worldState:getWorldState');
+
+    this.$root.$on('bv::modal::hidden', event => {
+      if (event.componentId === 'buy-quest-modal') {
+        this.$root.$emit('buyModal::hidden', this.selectedItemToBuy.key);
+      }
+    });
   },
   methods: {
     questItems (category, sortBy, searchBy, hideLocked, hidePinned) {

website/client/src/components/shops/shopItem.vue

@@ -6,6 +6,7 @@
       tabindex="0"
       @click="click()"
       @keypress.enter="click()"
+      @blur="blur"
     >
       <div
         class="item"
@@ -64,6 +65,7 @@
     </div>
     <b-popover
       v-if="showPopover"
+      ref="popover"
       :target="itemId"
       triggers="hover focus"
       :placement="popoverPosition"
@@ -319,10 +321,21 @@ export default {
     this.countdownString();
     this.timer = setInterval(this.countdownString, 1000);
   },
+  mounted () {
+    this.$root.$on('buyModal::hidden', itemKey => {
+      if (this.$refs && this.$refs.popover && itemKey === this.item.key) {
+        this.$refs.popover.$emit('close');
+        this.$refs.popover.$emit('disable');
+      }
+    });
+  },
   methods: {
     click () {
       this.$emit('click', {});
     },
+    blur () {
+      this.$refs.popover.$emit('enable');
+    },
     getPrice () {
       if (this.item.unlockCondition && this.item.unlockCondition.condition === 'party invite' && !this.owned) return this.item.unlockCondition.text();
       if (this.price === -1) {

website/client/src/components/shops/timeTravelers/index.vue

@@ -417,6 +417,11 @@ export default {
     this.$root.$on('buyModal::boughtItem', () => {
       this.backgroundUpdate = new Date();
     });
+    this.$root.$on('bv::modal::hidden', event => {
+      if (event.componentId === 'buy-quest-modal') {
+        this.$root.$emit('buyModal::hidden', this.selectedItemToBuy.key);
+      }
+    });
   },
   beforeDestroy () {
     this.$root.$off('buyModal::boughtItem');