input field not functional when used on top of a bootstrap modal

[mteichtahl]

I am currently calling swal from within a bootstrap modal. It seems that the buttons work but the input of the swal is not accepting a click nor does it ever take focus. I'm wondering if this is a known issue or possibly something I'm doing.

[KillerSquid]

I had the same issue. What I ended up doing was 'hiding' the modal with modal.hide, opening the swal, doing whatever you need with the inputValue, then show the modal with modal.show on success or cancel of the swal.
Hope this helps.

[mteichtahl]

Dan
I found a fix for this. I'll post it tomorrow 

Sent from Outlook

On Mon, Aug 10, 2015 at 6:52 AM -0700, "Dan Kaufman" notifications@github.com wrote:

I had the same issue. What I ended up doing was 'hiding' the modal with modal.hide, opening the swal, doing whatever you need with the inputValue, then show the modal with modal.show on success or cancel of the swal.

Hope this helps.

—
Reply to this email directly or view it on GitHub.

[diederik555]

Hi mteichtahl,

Did you stil post the fix? I can not find it. Would really help!

[YannDanthu]

Hi,

Same issue with sweet alert (as well as sweetalert2).
The input field does not get the focus on firefox only. This happens only when opening a swal from a bootstrap modal.

Cannot figure out the problem yet. Really strange.

[Cu4rach4]

I have the same problem...any one have a solution?

[Cu4rach4]

hi, this allow to show input placeholder, but is not fix to focus on input...

#537

[lynnpen]

I have the same problem， can't find the fix...

[S0c5]

+1

[Cinamonas]

I found that the culprit is tabindex="-1" that's set on Bootstrap's modal.

The fix:

// call this before showing SweetAlert:
function fixBootstrapModal() {
  var modalNode = document.querySelector('.modal[tabindex="-1"]');
  if (!modalNode) return;

  modalNode.removeAttribute('tabindex');
  modalNode.classList.add('js-swal-fixed');
}

// call this before hiding SweetAlert (inside done callback):
function restoreBootstrapModal() {
  var modalNode = document.querySelector('.modal.js-swal-fixed');
  if (!modalNode) return;

  modalNode.setAttribute('tabindex', '-1');
  modalNode.classList.remove('js-swal-fixed');
}

[timm3]

I have a nearly identical issue, except it only occurs if the modal is so tall that it is scrollable on the y-axis.

[eminumut]

Please help me...

[navas]

Cinamonas's tab fix didn't work for me :(

[Alagaesia93]

+1
@eminumut @navas
Have you called fixBootstrapModal() before showing swal? I forgot to do that at first, but now works perfectly!

Thank you @Cinamonas

[eminumut]

@Alagaesia93

Would you show me some examples?

[Alagaesia93]

@eminumut

fixBootstrapModal()
swal({whatever}, function(isConfirm){
whatever
restoreBootstrapModal()
}

It works for me :)

[caleb87]

The fix generates a syntax error in IE11

[Cinamonas]

@caleb87, I've updated the snippet not to use arrow functions and const.

[t4t5]

This seems to be an issue with Bootstrap so I will close for now. Thanks for the fix @Cinamonas!

[gopal9999]

Hi , I have faced the same issue .
This issue can be solved by removing { tabindex="-1" } from Bootstrap Modal.
It's work fine for me.

[ghost]

Does anyone know how to apply this fix in R? I'm having the same issue, but my attempts to convert it to R have failed so far

[jhoanborges]

I found that the culprit is tabindex="-1" that's set on Bootstrap's modal.

The fix:

// call this before showing SweetAlert:
function fixBootstrapModal() {
  var modalNode = document.querySelector('.modal[tabindex="-1"]');
  if (!modalNode) return;

  modalNode.removeAttribute('tabindex');
  modalNode.classList.add('js-swal-fixed');
}

// call this before hiding SweetAlert (inside done callback):
function restoreBootstrapModal() {
  var modalNode = document.querySelector('.modal.js-swal-fixed');
  if (!modalNode) return;

  modalNode.setAttribute('tabindex', '-1');
  modalNode.classList.remove('js-swal-fixed');
}

genius

[MateusFGoncalves]

For those who have more than one modal, you can use:
Documento sem título (1).pdf

[Rubncal04]

It doesn't work for me, I have the same issue. can anyone help me or tell me what's my problem?

fixBootstrapModal()
Swal.fire({whatever}).then((result) => {
restoreBootstrapModal()
})