I made an alert box using Sweetalert2, however the arrow keys do not work. I want to be able to use the arrow keys to choose between yes and no. It works on the site using their demos, but not with my code. Here is the snippet:
Swal.fire({
width: '32rem',
title: ' Incoming Call!',
text: "Take it?",
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes',
cancelButtonText: 'No'
}).then((result) => {
if (result.isConfirmed) {
}
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=1980, height=1080"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.0/dist/sweetalert2.all.min.js"></script>
Fixed it : Changed the CancelButton to DenyButton. For some weird reason it works with Deny button but not with the cancel button.
This was actually a bug in the library and I fixed it in the latest release: https://github.com/sweetalert2/sweetalert2/releases/tag/v11.4.2
Please update your dependency and arrow keys will work properly with Confirm and Cancel buttons.