Use prevent default and stop propagation (workadventure#4078)

When user clicks on the close button of the map editor, a pointer event is detected on the canvas behind and force to create area preview. The map editor is closed, but one area preview keeps visible.
To fix this issue, we force to stop the event when user clicks on close button.

Author: gparant

play/src/front/Components/ActionsMenu/ActionsMenu.svelte

@@ -51,7 +51,9 @@
 {#if actionsMenuData}
     <div class="tw-flex tw-w-full tw-h-full tw-justify-center tw-items-center">
         <div class="actions-menu tw-p-4 is-rounded tw-max-w-xs">
-            <button type="button" class="close-window" on:click={closeActionsMenu}>×</button>
+            <button type="button" class="close-window" on:click|preventDefault|stopPropagation={closeActionsMenu}
+                >×</button
+            >
             {#if actionsMenuData.menuName}
                 <h2 class="name tw-mb-2 !tw-mt-0 tw-mx-2 margin-close">{actionsMenuData.menuName}</h2>
             {/if}

play/src/front/Components/Chat/Chat.svelte

@@ -243,7 +243,7 @@
 <div id="chatWindow" class:show={$chatVisibilityStore}>
     <input type="text" bind:this={searchElement} on:keydown={search} style="display: none;" />
     {#if $chatVisibilityStore}<div class="hide">
-            <button class="close-window" on:click={closeChat}>&#215;</button>
+            <button class="close-window" on:click|preventDefault|stopPropagation={closeChat}>&#215;</button>
         </div>{/if}
     <iframe
         id="chatWorkAdventure"

play/src/front/Components/EmbedScreens/Layouts/PresentationLayout.svelte

@@ -91,7 +91,7 @@
                                         <button
                                             type="button"
                                             class="close-window top-right-btn"
-                                            on:click={closeCoWebsite}
+                                            on:click|preventDefault|stopPropagation={closeCoWebsite}
                                         >
                                             &times;
                                         </button>

play/src/front/Components/MapEditor/MapEditor.svelte

@@ -35,7 +35,11 @@
             <button class="tw-absolute tw-right-10 tw-p-1 tw-cursor-pointer" on:click={hideMapEditor}
                 ><MinusIcon size="20" /></button
             >
-            <button class="close-window" data-testid="mapEditor-close-button" on:click={closeMapEditor}>&#215;</button>
+            <button
+                class="close-window"
+                data-testid="mapEditor-close-button"
+                on:click|preventDefault|stopPropagation={closeMapEditor}>&#215;</button
+            >
             {#if $mapEditorSelectedToolStore === EditorToolName.TrashEditor}
                 <TrashEditor />
             {/if}

play/src/front/Components/MapEditor/PropertyEditor/JitsiRoomConfigEditor.svelte

@@ -69,7 +69,7 @@
 
 <div class="menu-container center">
     <div class="tw-w-full tw-bg-dark-purple/95 tw-rounded" transition:fly={{ x: 1000, duration: 500 }}>
-        <button type="button" class="close-window" on:click={close}>&times</button>
+        <button type="button" class="close-window" on:click|preventDefault|stopPropagation={close}>&times</button>
         <select class="tag-selector" bind:value={selectedKey} on:change={() => onSelectedKey()}>
             <option value="">{$LL.mapEditor.properties.jitsiProperties.jitsiRoomConfig.addConfig()}</option>
             {#each defaultConfigKeys as configKey (configKey)}

play/src/front/Components/MapEditor/WAMSettingsEditor.svelte

@@ -33,7 +33,7 @@
 </script>
 
 <div class="configure-my-room" in:fly={{ x: 100, duration: 250, delay: 200 }} out:fly={{ x: 100, duration: 200 }}>
-    <button class="close-window" on:click={close}>&#215;</button>
+    <button class="close-window" on:click|preventDefault|stopPropagation={close}>&#215;</button>
     <div class="menu">
         <h3>{$LL.mapEditor.sideBar.configureMyRoom()}</h3>
         <ul>

play/src/front/Components/Menu/Menu.svelte

@@ -129,9 +129,10 @@
         <h2 class="tw-p-5 blue-title">{$LL.menu.title()}</h2>
         <nav>
             {#each $subMenusStore as submenu, i (submenu.key + "_" + submenu.type)}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
                 <div
                     class="menu-item-container {activeSubMenu === submenu ? 'active' : ''}"
-                    on:click|preventDefault={() => switchMenu(submenu)}
+                    on:click|preventDefault|stopPropagation={() => switchMenu(submenu)}
                 >
                     <button type="button" class="tw-flex menu-item">
                         {subMenuTranslations[i]}
@@ -142,7 +143,7 @@
         </nav>
     </div>
     <div class="menu-submenu-container tw-bg-dark-purple/95 tw-rounded" transition:fly={{ y: -1000, duration: 500 }}>
-        <button type="button" class="close-window" on:click={closeMenu}>&times;</button>
+        <button type="button" class="close-window" on:click|preventDefault|stopPropagation={closeMenu}>&times;</button>
         <h2>{activeSubMenuTranslation}</h2>
         <svelte:component this={activeComponent} {...props} />
     </div>

play/src/front/Components/Modal/GlobalCommunicationModal.svelte

@@ -165,7 +165,7 @@
 
 <div class="menu-container {isMobile ? 'mobile' : 'center'} tw-h-3/4" bind:this={mainModal}>
     <div class="tw-w-full tw-bg-dark-purple/95 tw-rounded" transition:fly={{ x: 1000, duration: 500 }}>
-        <button type="button" class="close-window" on:click={close}>&times</button>
+        <button type="button" class="close-window" on:click|preventDefault|stopPropagation={close}>&times</button>
         <header>
             <h2 class="tw-p-5 blue-title">Global communication</h2>
             {#if activeLiveMessage || inputSendTextActive || uploadAudioActive}

play/src/front/Components/Modal/Modal.svelte

@@ -49,7 +49,7 @@
 
 <div class="menu-container {isMobile ? 'mobile' : $modalIframeStore?.position}" bind:this={mainModal}>
     <div class="tw-w-full tw-bg-dark-purple/95 tw-rounded" transition:fly={{ x: 1000, duration: 500 }}>
-        <button type="button" class="close-window" on:click={close}>&times</button>
+        <button type="button" class="close-window" on:click|preventDefault|stopPropagation={close}>&times</button>
         {#if modalUrl != undefined}
             <iframe
                 id="modalIframe"

play/src/front/Components/Modal/Popup.svelte

@@ -8,7 +8,10 @@
 
 {#if isOpen}
     <div class="popup-menu tw-min-h-fit tw-rounded-3xl tw-overflow-visible" transition:fly={{ x: 1000, duration: 500 }}>
-        <button type="button" class="close-window !tw-bg-transparent !tw-border-none " on:click={closeModal}
+        <button
+            type="button"
+            class="close-window !tw-bg-transparent !tw-border-none "
+            on:click|preventDefault|stopPropagation={closeModal}
             >&times
         </button>
         <div class="tw-p-8 tw-flex tw-flex-col tw-justify-center tw-items-center">