Modal inside a modal doesn't close on clickOutsideToClose

[kasunvp]

Our app uses tether-dialog and we need to have the functionality to open dialogs inside dialogs (e.g: Trello). But when tether-dialog is used it doesn't close with outside click even having the following property set:

{{#tether-dialog
  attachment='top left'
  clickOutsideToClose=true
  close=toggleModal
  containerClassNames=containerClassNames
  hasOverlay=false
  target=toggleButton
  targetAttachment='top right'}}
  <div>content</div>
{{/tether-dialog}}

Thanks.

[kasunvp]

Just an addition to the above, looks like the problem persists even without being inside of another modal. Can anyone please confirm on this? Thanks.

[chrislopresto]

@kasunvp There may have been a programmatic problem with the close behavior of nested modals because we weren't calling super in the didInsertElement and willDestroyElement hooks. That is fixed in the 0.8.2 release I just published.

That being said, click outside to close appears fine in standard usage. You can see it in action in the demo app here: http://yapplabs.github.io/ember-modal-dialog/

If you're still having problems, could you post some more context? Thanks.

[kasunvp]

@chrislopresto Thanks for the quick turn around. I tried the 0.8.2 release and it doesn't work for my context either. To make that more clear to you I'm attaching screenshots of a simple app I made with two components, one being the main/outer modal and the others being inner modal.

Also, vimeo link below is a 1 min screencast which shows the problem I encounter. (To make it clear that our main web app doesn't have a programmatic interference with ember-modal-dialog I created this new Ember cli app and it uses Ember-cli 1.13.8 and Ember 1.13.10)

Screencast: https://vimeo.com/143852248

Application template

x-modal-outer component / main modal

x-modal-inner component / sub modal

modal styles