Modal is "visible" before spawning

[danzanzini]

https://www.chromestatus.com/feature/5148698084376576 Since chrome now [prevents alert dialogs from embedded applications](), I'm trying to use data-confirm-modal to replace all dialogs from my application.

I could install the gem but, at first, it removed the dialog but the modal didn't show up, and the action was confirmed even without the user accepting it.

I did some investigation and found out the problem at this part of the code: https://github.com/ifad/data-confirm-modal/blob/404119ad5bf7754c31af41e35935e365c69dcd92/vendor/assets/javascripts/data-confirm-modal.js#L336

The modal responds to true even before it's spawned. I've spawned it manually through the console and it worked. The modal shows up and the user can confirm the action as it should be.

The modal object:

<div 
  id="confirm-modal-216530675292821" 
  class="modal false fade" 
  tabindex="-1" 
  role="dialog" 
  aria-labelledby="confirm-modal-216530675292821Label" 
  aria-hidden="true" style="z-index: 1051;"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h5 id="confirm-modal-216530675292821Label" class="modal-title">Entfernen</h5> 
      </div>
      <div class="modal-body"><p>Do you really want to remove this service?</p></div>
      <div class="modal-footer">
        <button class="btn cancel btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <button class="btn commit btn-danger" data-dismiss="modal">Confirm</button>
      </div>
    </div>
  </div>
</div>

Do you have any idea on why the modal is responding to true? If you need any other info, I'll be glad to bring it

[tagliala]

Hi

prevents alert dialogs from embedded applications

Could you please clarify "embedded applications"?

Do you have any idea on why the modal is responding to true? If you need any other info, I'll be glad to bring it

Which version of chrome? Any chance to see a reproducible test case?

I cannot replicate here: https://output.jsbin.com/lejopuq/ (chrome Version 92.0.4515.107 (Official Build) (x86_64) / macOS 11.5.1)

[danzanzini]

Hi @tagliala. Just figured out that this app is using a mix of Bootstrap 2 and 3. I've changed to the bootstrap 2 version and it works as expected.

Sorry for the inconvenience and thanks for the quick response. I'm closing this issue :)

[tagliala]

You're welcome, glad you solved