Keyboard navigation is broken when swal is called inside a bootstrap modal

[victornpb]

When you launch it from within a bootstrap modal, it is not possible to focus the buttons, so enter or tab doesn't work.

Also pressing esc dismisses both the alert and the modal.

https://jsfiddle.net/Victornpb/c1eyd94v/

I understand that this is caused by the way bootstrap handles focus and keypresses, but considering how widespread bootstrap is compatibility is kinda expected.

[victornpb]

bootstrap locks focus to only elements inside the modal, so using swal({target: modalBodyElement}) makes buttons focusable again, but it puts the backdrop inside the modal, so clicking outside, actually triggers the modal to be dismissed. So the desired behavior would be to only put the swal box inside the target, and continue to append the backdrop to body.

And seconds issue is regarding esc key, swal should stop propagation.

[victornpb]

This should be the way to handle keydown

document.addEventListener('keydown', function(e){
     //if esc 
     e.preventDefault();	
     e.stopPropagation();
     
}, true); //use capture so it triggers before bootstrap

Is there any good reason for sweetalert2 to use the old Element.onevent properties instead of addEventListener?

I would open a PR, but I tried to reason about the project structure and I don't even know where to start... at least I couldn't figure out any straightforward life cycle phases like init and destroy, that events are registered and teared down

[limonte]

Duplicate of #374

Check out #374 (comment) for the solution:

$('#myModal').on('shown.bs.modal', function() {
  $(document).off('focusin.modal');
});

Here's the fixed jsfiddle: https://jsfiddle.net/c1eyd94v/1/

[victornpb]

Not really a solution, because that allows user to focus on elements that are unreachable.
See jsfiddle: https://jsfiddle.net/Victornpb/c1eyd94v/2/

Anyway what about the ESC issue? do you want me o open a new issue just for that?

[limonte]

Not really a solution, because that allows user to focus on elements that are unreachable.
See jsfiddle: https://jsfiddle.net/Victornpb/c1eyd94v/2/

Nice jsfiddle, thanks! Reopening the issue.

Anyway what about the ESC issue? do you want me o open a new issue just for that?

That would be nice, please follow the issue template - it's there for a reason.

[limonte]

Hello @victornpb

Esc propagation has been fixed, I just released 7.20.8.

Also, I made the keydown handler work in capture mode, but it didn't help. I guess Bootstrap is doing something bad in the enforceFocus() method, but I don't have time to investigate further.

[infoeon]

The fix for this broke custom elements (javascript based autocomplete input fields, etc) within the content portion of the sweetalert. Potential fix would be to allow events for targets within the content of the swal:

var keydownHandler = function keydownHandler(e, innerParams) {
	var parentElement, targetElement = e.target, contentElement = getContent();
	while(parentElement = targetElement.parentElement){
		if(parentElement === contentElement){
			return;
		}
		targetElement = parentElement;
	}
	...

[limonte]

Apologies for missing your comment @infoeon, the same issue has been reported in #1130 and I fixed it today.

⚠️ ⚠️ ⚠️ Starting from v7.24.0, keydown handler will not work in capture mode by default, which means:

• custom elements will work nicely
• in order to get compatibility with Bootstap, set keydownListenerCapture parameter to true

[heyitshubham]

Use this code to put the focus on 'ok' button or your defined button to close the sweetalert popup.

Swal.fire({
        title: 'test',
        icon: 'error',
        confirmButtonText: 'Ok',
        onOpen: (popup) => {
          const okButton = popup.querySelector('.swal2-confirm') as HTMLElement;
          if (okButton) {
            okButton.focus();
          }
        }
      })