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

Properly Adding an External jQuery File in HTML Using jQuery

Seeking assistance as a newcomer to JS and programming in general. Currently working on a website where each page has its own HTML / PHP file, with jQuery and global JS functions included in the footer via a separate includes file "footer.php". Everything ...

What's causing this MUI React data grid component to be rendered multiple times?

I have developed a wrapper for the MUI Data Grid Component as portrayed: Selection.tsx: import * as React from 'react'; import { DataGrid, faIR, GridSelectionModel } from '@mui/x-data-grid'; import type {} from '@mui/x-data-grid/t ...

What can be done to stop the event handler from executing?

My goal is to verify a user's authentication every time they click on a button. If the user happens to be logged out and tries to click on a button, they should be redirected back to the home page. The issue I'm facing is that the code after the ...

NodeJS and DiscordJS: The art of modifying JSON files

Currently, I am grappling with the concept of appending data to a JSON file. The specific file in question (users.json) has the following structure: { "users": { "id": "0123456789", "name": "GeirAnders ...

Avoiding redundancy by establishing the loading state in a redux reducer

Let's dive into a concrete example to better illustrate my point. In the webapp I'm working on, users can apply for jobs using a job reducer that handles various actions such as creating_job, created_job, fetching_job, fetched_job, fecthing_jobs, ...

Dealing with errors such as "Failed to load chunk" can be resolved by implementing lazy-loading and code-splitting techniques

Our team is currently working on a Vue.js application using Vue CLI 3, Vue Router, and Webpack. The routes are lazy-loaded and the chunk file names include a hash for cache busting purposes. So far, everything has been running smoothly. However, we encoun ...

Combining several objects into a one-dimensional array

I am encountering a small issue with correctly passing the data. My form is coming in the format {comment:'this is my comment'} and the id is coming as a number. I need to send this data to the backend. let arr = []; let obj = {}; o ...

Using Vue.js, perform calculations on various fields within an array of objects generated by the v-for directive

I am currently learning Vue.js and I have implemented a v-for loop to iterate through an array of objects. However, I now need to calculate a specific field (precoPorKg) within this loop. In order to perform this calculation, the input item.quantidade mus ...

Issue with dropdown component in material ui version v1.0 beta 26 encountered

Currently, I am encountering an issue with the dropdown component while using Material UI v1.0 beta.26. In this updated version, you are required to utilize the Select component along with MenuItem. Although my dropdown is successfully populated upon rend ...

Error encountered while making a REST API call in Ajax: Unforeseen SyntaxError: Colon unexpected

I am currently troubleshooting my code to interact with a REST API. My platform of choice is "EspoCRM" and I aim to utilize its API functionalities. The official documentation recommends using Basic Authentication in this format: "Authorization: Basic " ...

When I attempt to run JavaScript code on the server, it fails to execute properly

When I run my code on my PC without putting it on the server, it works perfectly fine. However, when I upload it to the server and try to call it, I encounter the following error: Uncaught ReferenceError: crearLienzo is not defined at onload ((index): ...

What is the best way to empty the input field after a download event is completed in Node.JS?

For hours on end, I've been struggling with a persistent issue in my video downloader app. After successfully downloading a video, the input field where the URL is entered remains filled instead of clearing out. The screenshot below illustrates the p ...

Keep track of the current state as the page changes with React Router

I am experiencing an issue with my React component. const Page = React.createClass({ getInitialState() { return { page: {} }; }, componentDidMount() { const pageId = this.props.params.pageId; socket.emit('get page', pageId, (pa ...

What is the best way to combine a string that is constructed across two separate callback functions using Mongoose in Node.js?

I am facing a situation where I have two interconnected models. When deleting a mongo document from the first model, I also need to delete its parent document. There is a possibility of an exception being thrown during the second deletion process. Regardl ...

Failed attempt to perform Ajax requests for REST API data

I am currently working on developing an application that requires a login through a REST API to retrieve a session id. To achieve this, I have set up a button that triggers a JavaScript function for making an AJAX call to authenticate the user. The result ...

What is the best way to display HTML in this particular situation?

This is the function I am working on: public static monthDay(month: number): string { let day = new Date().getDay(); let year = new Date().getFullYear(); return day + ", " + year; } I am trying to add <span></span> tags around ...

Are Ajax Caching and Proper Format Being Employed?

Can you help me with a JavaScript event that I have to call in this way: function addEvent(date, resId) { $("#appPlaceholder").load("/Schedule/Add?date=" + date.format()+"&resourceId="+resId, function () { $('#event ...

"Is there a way to retrieve a field from a different model within a Mongoose model

Presented below are two distinct MongoDB Models: Movie Model import mongoose from 'mongoose'; const movieSchema = new mongoose.Schema({ title: { type: String, required: [true, 'Please Enter the Movie Title'], trim: true, ...

Form_Open will automatically submit - Ajax Submission in CodeIgniter

I am facing an issue with submitting my form via Ajax. Despite setting up a function to prevent the page from refreshing upon submission, it seems like the form still refreshes the page every time I click submit. I even tried creating a test function to lo ...

Identifying a web application functioning as a homescreen app within the Android Stock Browser

We are in the process of developing a web application that needs to function as a standalone or homescreen app. While we can identify if it is being accessed from Chrome or Safari using window.navigator.standalone or window.matchMedia('(display-mode: ...