Skip to content
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

tab is not working in the form when sweet alert is pop up #391

Open
atulintel opened this issue Jun 27, 2015 · 22 comments
Open

tab is not working in the form when sweet alert is pop up #391

atulintel opened this issue Jun 27, 2015 · 22 comments

Comments

@atulintel
Copy link

I am using sweet alert in the html form which is popup on button click but the when i click on ok button of popup, the tab index does not work after that and i have to click each and every field to fill it.

@mfontolan
Copy link

The same think happens to me.

@krishnr
Copy link

krishnr commented Aug 6, 2015

Yup, happens to me as well. Also, hitting enter to dismiss the pop up removes the focus from the page and you cannot focus on the page again without clicking.

@fxghqc
Copy link

fxghqc commented Aug 13, 2015

remove window events in doneFunction resolve this.

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
}, function(){

  // remove these events;
  window.onkeydown = null;
  window.onfocus = null;

  swal("Deleted!", "Your imaginary file has been deleted.", "success");
});

@ecwyne
Copy link
Contributor

ecwyne commented Sep 18, 2015

@fxghqc removing event handlers in the callback works for me. Can this be included in the main code to prevent this bug?

@henry74
Copy link

henry74 commented Oct 7, 2015

+1

@ShlomoRosenheimer
Copy link

When will this be fixed?

@knownAsKyle
Copy link

+1

@edi
Copy link

edi commented Jun 22, 2016

Is there any fork of this bug I can work with ? I am not sure how to use @xiaouze88's commit.
I'm having annoying issues regarding this bug as well.

@jeffbromberger
Copy link

This bug still exists. You can even see it on the main sweetalert demo page... http://t4t5.github.io/sweetalert/

Simply click the Try Me button for the AJAX example and then notice that tab no longer works. I can see in the debugger that window.onfocus is not being restored to null afterwords. If I manually set it then I can use tab again. But setting it to null in the callback function passed to swal() does NOT work for me. I set it to null there, but something else internal to Sweetalert is setting it back before the whole process ends. Breaking into the debugger several seconds later confirms this.

Please fix!

@mhoffmeyerDC
Copy link

I can confirm this behavior as well. It's intermittent, the best type of bug...
I am seeing the window.onkeydown event being bound to the function even after dialogs have closed... and possibly even before a dialog has been triggered.

@Mr-Anonymous
Copy link

I am experiencing the exact same issue as well. When the SweetAlert pop-up is closed, tabs in the page's form stops working even with tabindex set.

@edi
Copy link

edi commented Jan 3, 2017 via email

@Mr-Anonymous
Copy link

That will be really great @Eduardjs Thank you for that.

For now I am using the solution from @JustinWinthers in another thread:

(function (){

    var _swal = window.swal;

    window.swal = function(){

        var previousWindowKeyDown = window.onkeydown;

        _swal.apply(this, Array.prototype.slice.call(arguments, 0));

        window.onkeydown = previousWindowKeyDown;

    };

})();

REF: #127

@edwin1217
Copy link

@Mr-Anonymous
update

var _swalclose=window.swal.close;
var _swal = window.swal;
window.swal = function(){
var previousWindowKeyDown = window.onkeydown;
_swal.apply(this, Array.prototype.slice.call(arguments, 0));
window.onkeydown = previousWindowKeyDown;
};
window.swal.close=function(){
_swalclose.apply(this);
};

@steve-rhodes
Copy link

steve-rhodes commented Feb 25, 2017

Wow! I just found this thread. I spent days on wondering why my tabs work and then they don't. Now I realize that sometimes I use a sweetalert and that's the reason it stopped!

Is anyone still working on a fix for this and what's the best solution to deal with it for now?

Edit: just saw the sweetalert2 message above. I didn't know there is another version, so I will give it a go, but there is quite a bit of work to be done to migrate!

@edi
Copy link

edi commented Feb 25, 2017

@elasticsteve If you pay attention to the other threads on this repo you will notice this one is not maintained anymore.

There is another repo called SweetAlert2, which you should really port your apps towards.

If you still want to use this version though, the only solution is this one. I forgot to make a PR.. didn't have enough time. @edwin1217's solution is the one you should go with.

@kosst
Copy link

kosst commented Feb 25, 2017

@edwin1217's solution is nearly the same i have posted in thread #127 a while ago.

@steve-rhodes
Copy link

Thanks everyone. I tried to port over to SweetAlert2, but had to give up. I couldn't make a simple text input with closeOnConfirm: false work. After wasting 3 hours I reverted back and will try the suggestions above.

@steve-rhodes
Copy link

@kosst Yes, your solution is much better, because with the one from @edwin1217 the default Enter key action for OK and error messages (input text modals) wouldn't work.

Here again what's working for me best:

(function (){
    var close = window.swal.close;
    window.swal.close = function() {
        close();
        window.onkeydown = null;
    };
})();

@Omniscience619
Copy link

Omniscience619 commented May 24, 2019

}

I know it's been a really long time, but would you be kind enough to explain as to how I can call this function as a whole in another function? Where should I place this snippet in controller?

function(isConfirm){  //Function that triggers on user action.
        if(isConfirm){
          $scope.myData.splice(index,1);
          SweetAlert.swal("Deleted!");
        } else {
            SweetAlert.swal("Your file is safe!");
        }

@khoiwalvikram2
Copy link

change -
closeOnConfirm: false
TO -
closeOnConfirm: true

that's it... it worked for me

@devenock
Copy link

Hi everyone, I know it has been long but did any of you found a solution for this? I am still experiencing the same problem with Angular 12.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests