modal-open class not removed from body element

[jkirsch]

I repeatedly run into the error that after showing the select dialog, sometime the class "modal-open" stays on the body element.

This seems to be related to a similar issue

https://forum.ionicframework.com/t/modal-not-receiving-touch-events/8025/2

Is there something that could be done in the framework, to trigger this behavior ?

Such as

 $scope.$on('modal.shown',function() {
     setTimeout(function(){
          if( $document[0].body.classList.contains('modal-open')) {
              $document[0].body.classList.remove('modal-open');
          }
      },50);
});

[bianchimro]

hi @jkirsch , you have a codepen or something else to show the issue?
regards
Mauro

[jkirsch]

Well currently not - I'll look into providing one.

It feels like some race condition on modal dispose - as I can only trigger it sometimes on an Android Phone - never in the browser.
The modal-open class has a pointer-events: none entry thus disregards all touch events

[jkirsch]

Okay,

I think I found the mistake

I declared the modal in the following way

<div class="item item-button-right" ng-click="forward('selectButton')">
  Description: 
   <button class="button button-clear button-dark ion-android-arrow-dropdown" 
           id="selectButton" modal-select ng-model="mydata" options="::values">
	<div class="option">
	  {{option}}
	</div>
   </button>
</div>

As I wanted to have the entire row clickable .. I resorted to a simple click forwarding
angular.element(document.getElementById(elementname)).triggerHandler('click');

But If one now clicked on the button .. actually the modal is triggered twice .. this creates two instances that are conflicting .. leading to sometimes the case of an unhidden modal.

Obviously just moving the modal select up to the parent div fixed everything.

Sorry for the confusion .. so this is a non issue

For reference better solution

<div class="item item-button-right" modal-select ng-model="mydata" options="::values">
	Description: 
	<button class="button button-clear button-dark ion-android-arrow-dropdown"></button>
	<div class="option">
	  {{option}}
	</div>
</div>

[bianchimro]

@jkirsch thanks for reporting anyway, and for your reference solution