How can I prevent SweetAlert from automatically focusing when it first opens?

I recently integrated SweetAlert into my project and customized the buttons like this:

swal("A wild Pikachu appeared! What do you want to do?", {
  buttons: {
    cancel: "Run away!",
    catch: {
      text: "Throw Pokéball!",
      value: "catch",
    },
    defeat: true,
  },
  onOpen: function() { console.log("Test") } // Unfortunately, this isn't functioning
})
.then((value) => { ... });

However, I noticed that upon initial opening, it automatically focuses on the last button. Is there a way to prevent this auto-focus behavior so that no button is focused when the alert opens initially?

Answer №1

One suggestion that has been made in the comments is to use SweetAlert2, which offers more flexibility and is recommended for this situation.

By utilizing the didOpen parameter and the getConfirmButton() method, you can easily achieve the desired functionality:

Swal.fire({
  input: 'text',
  inputPlaceholder: 'I will not be autofocuses',
  didOpen: () => Swal.getConfirmButton().focus()
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transmit information from the frontend to the backend using JavaScript and the Express framework

After creating a custom variable in my frontend to store data, I needed to access the same data in my Express backend. The JavaScript variable and the POST request code snippet are as follows: const dataPush = { urlSave: urlSave, ...

PHP can display content directly in the browser, without the need for jQuery

As I develop a web interface for an application that has longer processing times, a loading page is displayed to the user when it starts. An AJAX call then loads the output onto the page. Strangely, while browsing the PHP function directly in the browser r ...

Ways to navigate through a webpage without encountering any overflow issues

My window is too small to scroll, but I still need the ability to do so. Is it possible to scroll even when the height of the container is not large enough to display the scrollbar? Below is the code I am using to achieve scrolling: setTimeout(function() ...

Assigning an array of objects within an AJAX request

I have a MediaObject object that includes: a Media object an array and a function called getMedia() When attempting to create a Media object and push it into the array inside the getMedia function after making an AJAX call, I encountered issues referenc ...

Error message: The function s.t.match is not defined in the context of react-export-excel

I have integrated Excel Export with custom cell styles from the react-export-excel examples in my frontend application. However, I encountered the following error whenever I attempt to click on the Export button. Uncaught TypeError: s.t.match is not a func ...

How can one elevate the properties of each item's sub-structure to the root level in an array containing object items?

I am working with an array containing objects, each with a specific structure... [{ user: { /* ... more (nested) user data ... */ }, vacation: { id: 'idValue', name: 'nameValue', startDate: 'dateValue', }, }, ...

Issue with React Native and Redux: Prop values are updating without being called

I'm currently facing a problem with React Native and Redux integration. Using a Redux state to toggle a modal visibility between components seems like the most efficient solution due to its cross-component nature. The modal opens and closes as expec ...

AngularJS: How service query data is perceived as an object and therefore cannot be utilized by Angular

When retrieving data from my PHP server page in the factory service, I encountered two different scenarios: If I call a function that returns an array and then use json_encode($data); at the end, Angular throws a resource misconfiguration error due to ...

Can sweetalert2 be used as a tooltip?

I have a query, is it feasible to include a tooltip in the alert message? Alternatively, could there be another tooltip option available? Swal.fire({ title: '<strong>An example with HTML tags</strong>', icon: 'info', ...

JavaScript forEach functionality is not compatible with Dynamics CRM 2016

I'm currently working on writing some JavaScript code for a ribbon button in Dynamics CRM 2016 that will extract phone numbers from a list of Leads displayed in the Active Leads window. However, I've encountered an error message when attempting ...

Object displaying no visible illumination

Recently, I've been experimenting with this project, and after some trial and error, I've managed to get things working to some extent. As a novice in JavaScript, I'm unsure if the issue I'm facing has a simple solution. The problem is ...

Combining similar validators in VueJS into one group

Upon installation of the vuelidate.js.org package for VueJs, I implemented the following validator script: }), Validations: { name: { required, minLength: minLength(3), maxLength: maxLength(50) }, family: { required, minLength: ...

Creating an HTML slideshow banner: What you need to know

I am looking to create a slideshow for my banner that changes automatically. The banners are located in a folder, and I want the website to display them one by one without manual intervention. Currently, I have managed to display the images from the folder ...

Python Selenium test on AngularJS UI slider implemented

I've been experimenting with setting up a UI slider (Label=ON/OFF, Slider, Apply button) using Angular JS in combination with selenium. Here's an example of the code I've been working on: jsfiddle In my attempts, I tried using the followin ...

How can we simplify deeply nested ajax callbacks in programming?

I have come across JavaScript code where the success callback of an Ajax handler triggers another Ajax call, which in turn may trigger yet another Ajax call. This results in deeply nested anonymous functions. Is there a smarter programming approach that ...

Having difficulty attaching events to Bootstrap 3 button radios in button.js

Struggling with extracting the correct value from a segmented control created using the radio button component of button.js in Twitter Bootstrap 3. Upon binding a click event to the segmented control and running $.serialize() on its parent form, I noticed ...

How can I make the lines of my drawer thicker in Material UI?

Currently, I'm in the process of implementing a left-side navigation bar for a web application I'm developing. The main challenge I'm facing is customizing the styles as desired when using the Drawer component. Specifically, I'm aiming ...

Why does my Javascript cross-domain web request keep failing with a Status=0 error code?

UPDATE: I've been informed that this method doesn't work because craigslist doesn't have an Allow-Cross-Domain header set. Fair point. Is there an alternative way to download a page cross-domain using Javascript in Firefox? It's worth ...

Using Django Template Variables in JavaScript Functions

Within one of my templates, there is a for loop that iterates over all the items. Whenever a user likes or dislikes an item, it should trigger a function in my code. I successfully set up the button's HTML like this: <button onclick='update_li ...

Issues persist with debugger functionality in browser development tools following an upgrade from Angular 8 to version 15

After upgrading from Angular version 8 to version 15, I've encountered an issue where the debugger is not functioning in any browser's developer tools. Can anyone provide some insight on what could be causing this problem? Is it related to the so ...