[BUG] Modal - Two modals on same page causes undefined close button text

[smulvih2]

I'm using Drupal WxT which comes with a modal in the footer for the social share links. When I add a second modal and initialize it, both modals show "undefined" as the close button text.

Modal markup:

<section id="frl-modal" class="mfp-hide modal-dialog modal-content overlay-def">
  <header class="modal-header">
    <h2 class="modal-title">Title</h2>
  </header>
  <div class="modal-body">
    <p>Body text...</p>
  </div>
</section>

Initializing modal:

$(document).trigger("open.wb-lbx", [[{
   src: "#frl-modal",
   type: "inline",
}], true ]);

After initializing the modal this is the markup:

<section id="frl-modal" class="modal-dialog modal-content overlay-def">
   <header class="modal-header">
     <h2 class="modal-title" id="lbx-title">Title</h2>
   </header>
   <div class="modal-body">
     <p>Body text...</p>
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-sm btn-primary pull-left popup-modal-dismiss" title="undefined">undefined<span class="wb-inv">undefined</span></button>
   </div>
</section>

Adding .modal-footer to my modal markup doesn't make any difference.

Here is a patch that shows where the issue seems to be occuring:

diff --git a/js/wet-boew.js b/js/wet-boew.js
index 533bd2a..98b0112 100644
--- a/js/wet-boew.js
+++ b/js/wet-boew.js
@@ -7260,8 +7260,8 @@ var componentName = "wb-lbx",
                hasFooter = footer.length,
                hasButton = hasFooter && $( footer ).find( ".popup-modal-dismiss" ).length !== 0,
                closeClassFtr = "popup-modal-dismiss",
-               closeTextFtr = i18nText.close,
-               spanTextFtr = i18nText.oClose,
+               closeTextFtr = Drupal.t('Close'),
+               spanTextFtr = Drupal.t('Close overlay'),
                overlayCloseFtr;

            if ( !hasButton ) {
@@ -9548,8 +9548,8 @@ var componentName = "wb-overlay",
                var hasFooter = ( footer && footer.length !== 0 ) ? true : false,
                    hasButton = hasFooter && $( footer ).find( closeClass ).length !== 0,
                    closeClassFtr = ( $elm.hasClass( "wb-panel-l" ) ? "pull-right " : "pull-left " )  + closeClass,
-                   closeTextFtr = i18nText.close,
-                   spanTextFtr = i18nText.closeOverlay,
+                   closeTextFtr = Drupal.t('Close'),
+                   spanTextFtr = Drupal.t('Close overlay'),
                    overlayCloseFtr;

                if ( !hasButton ) {

For some reason i18nText doesn't return the correct text in this scenario.

To Reproduce Add two modals to a page and initialize them.

Expected behavior Expected behavior is that both modals use the correct close button text, with translation on French page.

Additional information

Version of WET-BOEW v4.0.38 - 2020-09-18

Desktop/Smartphone

• Ubuntu 18.04.5 LTS
• Firefox 88.0

Screenshots

[ghost]

Appears forcing the overlay to trigger is interrupting initialization when multiple overlays on the page.

I don't have a fix, but short term you can do this till someone figures out why.

        $( document ).on( "wb-ready.wb-overlay", ".wb-overlay", function( event ) {
            $(document).trigger("open.wb-lbx", [[{
               src: "#frl-modal",
               type: "inline",
            }], true ]);
        });