Fix close-button unreliability bug

4 files changed, 7 insertions, 6 deletions

diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index e76254d..3fb68ab 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -7,7 +7,7 @@ export default defineComponent({
 	},
 	methods: {
 		closeClicked(evt: Event){
-			if (evt.target == this.$el || evt.target == this.$refs.closeIcon){
+			if (evt.target == this.$el || this.$refs.closeIcon.contains(evt.target)){
 				this.$emit('help-modal-close');
 			}
 		},
@@ -20,7 +20,7 @@ export default defineComponent({
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked">
 	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4
 		bg-stone-50 rounded-md shadow shadow-black">
-		<svg class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" @click="closeClicked" ref="closeIcon">
+		<svg class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" @click.stop="closeClicked" ref="closeIcon">
 			<use href="#svg-close"/>
 		</svg>
 		<h1 class="text-center text-xl font-bold mb-2">Help Info</h1>
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index ee1cc2e..cdf1206 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -44,7 +44,7 @@ export default defineComponent({
 		bg-stone-50 rounded-md shadow shadow-black flex gap-1">
 		<input type="text" class="block border"
 			@keyup.enter="onSearchEnter" @keyup.esc="closeClicked" ref="searchInput"/>
-		<svg class="block w-6 h-6 ml-1 hover:cursor-pointer hover:bg-stone-200" @click="onSearchEnter">
+		<svg class="block w-6 h-6 ml-1 hover:cursor-pointer hover:bg-stone-200" @click.stop="onSearchEnter">
 			<use href="#svg-search"/>
 		</svg>
 	</div>
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 51f3b26..b1d8fe4 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -20,7 +20,7 @@ export default defineComponent({
 	},
 	methods: {
 		closeClicked(evt: Event){
-			if (evt.target == this.$el || evt.target == this.$refs.closeIcon){
+			if (evt.target == this.$el || this.$refs.closeIcon.contains(evt.target)){
 				this.$emit('info-modal-close');
 			}
 		},
@@ -33,7 +33,8 @@ export default defineComponent({
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked">
 	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4
 		bg-stone-50 rounded-md shadow shadow-black">
-		<svg class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" @click="closeClicked" ref="closeIcon">
+		<svg class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"
+			@click.stop="closeClicked" ref="closeIcon">
 			<use href="#svg-close"/>
 		</svg>
 		<h1 class="text-center text-xl font-bold mb-2">{{tolNode.name}}</h1>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index 9f64252..af3965e 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -471,7 +471,7 @@ export default defineComponent({
 		@sepd-parent-clicked="onSepdParentClicked" @info-icon-clicked="onInnerInfoIconClicked"/>
 	<!-- Settings -->
 		<!-- outer div prevents overflow from transitioning to/from off-screen -->
-	<div class="fixed left-0 top-0 w-full h-full overflow-hidden invisible" @click="closeClicked">
+	<div class="fixed left-0 top-0 w-full h-full overflow-hidden invisible">
 		<transition name="slide-bottom-right">
 			<settings v-if="settingsOpen" :layoutOptions="layoutOptions" :componentOptions="componentOptions"
 				@settings-close="onSettingsClose" @layout-option-change="onLayoutOptionChange"/>