Search code examples
javascriptsweetalertsweetalert2

Arrow keys scroll the site when using Sweetalert2

I made a popup alert using Sweetalert2. I want to be able to use the arrowkeys to choose between accept and deny. However, it also affects the site itself, it's scrolling in the background. I added the code (right and left arrow keys affect the background too). The scrollbars are hidden in the site, so I am assuming it has to do with that in some way.

What can I do so the arrows only affect the choice? The table is only there in the code to get the site wide enough to be scrollable for the example.

    Swal.fire({
    width: '16rem',
  title: 'CALL!',
  text: "Take call?",
  showDenyButton: true,
  showCancelButton: false,
  confirmButtonColor: '#353535',
  denyButtonColor: '#353535',
  confirmButtonText: 'Yes',
  denyButtonText: 'No',
  allowOutsideClick: false,
  keydownListenerCapture:true,
  stopKeydownPropagation:true
})
.swal2-popup .swal2-styled:focus {
    opacity: 1!important;
    background-color: #6D9E18!important;
    color: white!important;
    box-shadow:none!important;
}

.swal2-styled .swal2-confirm:focus {
    opacity: 1!important;
    background-color: #6D9E18!important;
    color: white!important;
    box-shadow:none!important;
}
.swal2-styled.swal2-default-outline:focus{
    opacity: 1!important;
    background-color: #6D9E18!important;
    color: white!important;
    box-shadow:none!important;
}

.swal2-actions:not(.swal2-loading) .swal2-styled:hover{
   opacity: 1!important;
    background-color: #6D9E18!important;
    color: white!important;
    box-shadow:none!important;
}

html, body{
  background-color: #353535;
  color : #FCFCFC;
  font-family: 'Quicksand';
  font-weight : 700;
  font-size : 4.5vh;
  border-width: 0px;
  border: none;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0px;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}

body::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
 <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
 <table width="2000px">
 <tr>
   <td>djwaodjsakdjlsakdjsalkdjsalkdjalksfhuebgnmsdvbmncxbvmcxbvhkbmdnbvmnxcbvmnxcbvmncxbvmnxcbvnmcxbvkjadbvdbvhsdbvkdsvbhds</td>
 </tr>
 </table>

Solution

  • Unset styles from html by replacing html, body { with body {