Bug fix with the arrows key

web/src/lib/components/shared-components/change-date.svelte

@@ -48,9 +48,14 @@
       dispatch('confirm', value);
     }
   };
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      event.stopPropagation();
+    }
+  };
 </script>
-
-<ConfirmDialogue
+<div role="presentation" on:keydown={handleKeydown}>
+  <ConfirmDialogue
     confirmColor="primary"
     cancelColor="secondary"
     title="Change Date"
@@ -58,7 +63,7 @@
     {disabled}
     on:confirm={handleConfirm}
     on:cancel={handleCancel}
->
+  >
     <div class="flex flex-col text-md px-4 py-5 text-center gap-2" slot="prompt">
       <div class="mt-2" />
       <div class="flex flex-col">
@@ -80,4 +85,5 @@
         />
       </div>
     </div>
-</ConfirmDialogue>
+  </ConfirmDialogue>
+</div>