Escape key binding fixes ...

- Bindings are created and destroyed when necessary on Panes and Stacks
- Not on filters and columns since the panes and stacks handle them
- Add a binding to the favorite creator when its shown, and destroy when its hidden

Author: jasonvarga

resources/js/components/FavoriteCreator.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <popper v-if="isNotYetFavorited" ref="popper" @show="highlight" trigger="click" :append-to-body="true" :options="{ placement: 'bottom' }">
+        <popper v-if="isNotYetFavorited" ref="popper" @show="shown" @hide="hidden" trigger="click" :append-to-body="true" :options="{ placement: 'bottom' }">
 
             <div class="card p-0 shadow-lg z-top">
                 <div class="flex justify-between text-center">
@@ -46,6 +46,7 @@ export default {
             name: document.title.replace(' ‹ Statamic', ''),
             currentUrl: this.$config.get('urlPath').substr(this.$config.get('cpRoot').length+1),
             showingPinTab: true,
+            escBinding: null,
         }
     },
 
@@ -69,6 +70,15 @@ export default {
     },
 
     methods: {
+        shown() {
+            this.escBinding = this.$keys.bindGlobal('esc', e => this.$refs.popper.doClose());
+            this.highlight();
+        },
+
+        hidden() {
+            this.escBinding.destroy();
+        },
+
         highlight() {
             setTimeout(() => this.$refs.fave.select(), 20);
         },
@@ -116,12 +126,6 @@ export default {
                 }
             });
         },
-    },
-
-    mounted() {
-        this.$keys.bindGlobal(['esc'], e => {
-            this.$refs.popper.doClose();
-        });
     }
 }
 </script>

resources/js/components/data-list/ColumnPicker.vue

@@ -130,10 +130,6 @@ export default {
                     this.$toast.error(__('Something went wrong'));
                 });
         }
-    },
-
-    created() {
-        this.$keys.bind('esc', this.dismiss)
-    },
+    }
 }
 </script>

resources/js/components/data-list/Filters.vue

@@ -124,11 +124,7 @@ export default {
                     this.$toast.error(__('Something went wrong'));
                 });
         }
-    },
-
-    created() {
-        this.$keys.bind('esc', this.dismiss)
-    },
+    }
 
 }
 </script>

resources/js/components/panes/Pane.vue

@@ -13,12 +13,20 @@
 <script>
 export default {
 
+    data() {
+        return {
+            escBinding: null,
+        }
+    },
+
     created() {
         this.$panes.open(this);
+        this.escBinding = this.$keys.bindGlobal('esc', this.close);
     },
 
     destroyed() {
         this.$panes.close(this);
+        this.escBinding.destroy();
     },
 
     methods: {
@@ -27,12 +35,6 @@ export default {
             this.$emit('closed');
         },
 
-    },
-
-    mounted() {
-        this.$keys.bindGlobal(['esc'], e => {
-            this.close();
-        });
     }
 
 }

resources/js/components/stacks/Stack.vue

@@ -46,7 +46,8 @@ export default {
             depth: null,
             portal: null,
             visible: false,
-            isHovering: false
+            isHovering: false,
+            escBinding: null,
         }
     },
 
@@ -92,12 +93,14 @@ export default {
 
         this.$events.$on(`stacks.${this.depth}.hit-area-mouseenter`, () => this.isHovering = true);
         this.$events.$on(`stacks.${this.depth}.hit-area-mouseout`, () => this.isHovering = false);
+        this.escBinding = this.$keys.bindGlobal('esc', this.close);
     },
 
     destroyed() {
         this.$stacks.remove(this);
         this.$events.$off(`stacks.${this.depth}.hit-area-mouseenter`);
         this.$events.$off(`stacks.${this.depth}.hit-area-mouseout`);
+        this.escBinding.destroy();
     },
 
     methods: {
@@ -133,11 +136,9 @@ export default {
 
     mounted() {
         this.visible = true;
+    },
+
 
-        this.$keys.bindGlobal(['esc'], e => {
-            this.close();
-        });
-    }
 
 }
 </script>