Overflow issue when modal close

  • A+
Category:Languages

My app has a swipe to display hidden action on a list where users can decide to delete items in the list.

It uses HammerJS to handle swipe events and SweetAlert2 to confirm the action.

The issue is when the SweetAlert popup is dismissed. Once the user clicks on cancel and the modal close, all the buttons are suddenly visible. The whole document move to the left.

I created a JSFiddle that reproduce it.

Steps to reproduce:

  • Swipe right-to-left on one of the items to display the action;
  • Click on the "x" to delete the item;
  • Click Cancel.

I will also paste the content of the code below for reference:

HTML:

<div ng-app="app" ng-controller="mainCtrl" class="wrapper">   <div class="items" swipe>     <div ng-repeat="item in items" class="item">        <div>          <div class="item-wrapper">            <div class="logo">              <img src="http://2.bp.blogspot.com/-Y2XrnrXJmXs/Uf5Y_bfr4jI/AAAAAAAAALk/ydouC9lEmDE/s1600/Logogap+Logobb.jpg" alt="Overflow issue when modal close" />            </div>            <div class="info">              <div class="title">                {{item.title}}              </div>              <div class="description">                {{item.description}}              </div>            </div>          </div>          <div class="offset-action">            <button ng-click="delete()">              X            </button>          </div>        </div>     </div>   </div> </div> 

CSS:

body {   overflow: hidden; }  .wrapper {   border: 1px solid grey;   min-width: 350px;   max-width: 800px; }  .items {   overflow: hidden;   position: relative; }  .item {   padding: 10px 15px;   position: relative;   transition: transform 250ms ease-in-out; }  .item.show-actions {   transform: translateX(-70px); }  .item-wrapper {   align-items: center;   display: flex; }  .logo {   width: 80px; }  .logo img {   margin: auto;   width: 80px;   height: auto; }  .offset-action {   align-items: center;   background: #B11A1F;   display: flex;   position: absolute;   top: 0;   bottom: 0;   text-align: center;   right: -70px;   width: 70px; }  button {   background: transparent;   border: none;   color: white;   width: 100%;   height: 100%; } 

Javascript:

angular.module('app', [])  .controller('mainCtrl', function($scope) {     $scope.items = [     {title: 'Lorem Ipsum', description: 'Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.'},     {title: 'Lorem Ipsum', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'},     {title: 'Lorem Ipsum', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'},     {title: 'Lorem Ipsum', description: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'}   ];    $scope.delete = function() {     swal({         title: 'Lorem Ipsum',       text: 'Dolor sit amet?',       type: 'error',       showCancelButton: true     }).then(function(action) {         if (action.value) {         console.log('success');       } else {         swal.noop;       }     })   } })    .directive('swipe', function() {     return function(scope) {     scope.$watch('items', function() {       var $items = $('.item');       var show_action = 'show-actions';        function hideActions() {         $items.removeClass(show_action);       }        $items.each(function() {         var $item = $(this);          $item.hammer().on('swipeleft', function() {           var $this = $(this);           $items.removeClass(show_action);           if (!$this.hasClass(show_action)) {             $this.addClass(show_action);           }         });          $item.hammer().on('tap', hideActions);       });     });   }; }); 

 


Add document.activeElement.blur(); before calling swal().

https://jsfiddle.net/yd3gpsvL/

It looks to be caused by focus returning to the button after the popup closes. There's a discussion about it here.


Alternatively, you can use a div instead of a button (optionally with role="button") to avoid button's focus functionality.

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: