New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mteichtahl opened this Issue Jul 29, 2015 · 20 comments

Comments

Projects
None yet
@mteichtahl

mteichtahl commented Jul 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@KillerSquid

KillerSquid Aug 10, 2015

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.

KillerSquid commented Aug 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@mteichtahl

mteichtahl Aug 10, 2015

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.

mteichtahl commented Aug 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@diederik555

diederik555 Dec 11, 2015

Hi mteichtahl,

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

diederik555 commented Dec 11, 2015

Hi mteichtahl,

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

@YannDanthu

This comment has been minimized.

Show comment
Hide comment
@YannDanthu

YannDanthu Jun 6, 2016

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.

YannDanthu commented Jun 6, 2016

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

This comment has been minimized.

Show comment
Hide comment
@Cu4rach4

Cu4rach4 Jun 19, 2016

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

Cu4rach4 commented Jun 19, 2016

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

@Cu4rach4

This comment has been minimized.

Show comment
Hide comment
@Cu4rach4

Cu4rach4 Jun 19, 2016

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

#537

Cu4rach4 commented Jun 19, 2016

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

#537

@lynnpen

This comment has been minimized.

Show comment
Hide comment
@lynnpen

lynnpen Jul 15, 2016

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

lynnpen commented Jul 15, 2016

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

@S0c5

This comment has been minimized.

Show comment
Hide comment
@S0c5

S0c5 commented Jul 17, 2016

+1

@Cinamonas

This comment has been minimized.

Show comment
Hide comment
@Cinamonas

Cinamonas Jul 22, 2016

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');
}

Cinamonas commented Jul 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@timm3

timm3 Jul 28, 2016

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

timm3 commented Jul 28, 2016

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

This comment has been minimized.

Show comment
Hide comment
@eminumut

eminumut Dec 31, 2016

Please help me...

eminumut commented Dec 31, 2016

Please help me...

@navas

This comment has been minimized.

Show comment
Hide comment
@navas

navas Mar 14, 2017

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

navas commented Mar 14, 2017

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

@Alagaesia93

This comment has been minimized.

Show comment
Hide comment
@Alagaesia93

Alagaesia93 Apr 5, 2017

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

Thank you @Cinamonas

Alagaesia93 commented Apr 5, 2017

+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

This comment has been minimized.

Show comment
Hide comment
@eminumut

eminumut Apr 9, 2017

@Alagaesia93

Would you show me some examples?

eminumut commented Apr 9, 2017

@Alagaesia93

Would you show me some examples?

@Alagaesia93

This comment has been minimized.

Show comment
Hide comment
@Alagaesia93

Alagaesia93 Apr 11, 2017

@eminumut

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

It works for me :)

Alagaesia93 commented Apr 11, 2017

@eminumut

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

It works for me :)

@caleb87

This comment has been minimized.

Show comment
Hide comment
@caleb87

caleb87 Jun 27, 2017

The fix generates a syntax error in IE11

caleb87 commented Jun 27, 2017

The fix generates a syntax error in IE11

@Cinamonas

This comment has been minimized.

Show comment
Hide comment
@Cinamonas

Cinamonas Jun 28, 2017

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

Cinamonas commented Jun 28, 2017

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

@t4t5

This comment has been minimized.

Show comment
Hide comment
@t4t5

t4t5 Sep 8, 2017

Owner

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

Owner

t4t5 commented Sep 8, 2017

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

@t4t5 t4t5 closed this Sep 8, 2017

@gopal9999

This comment has been minimized.

Show comment
Hide comment
@gopal9999

gopal9999 Dec 14, 2017

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.

gopal9999 commented Dec 14, 2017

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.

@madmark81

This comment has been minimized.

Show comment
Hide comment
@madmark81

madmark81 Jan 14, 2018

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

madmark81 commented Jan 14, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment