Replacing dialog with BS dialog causes JS error TypeError: 'querySelector' called on an object that does not implement interface Element

I didn't come to a conclusion yet, but it seems that

1. The variable relatedTarget is undefined in modal.js early in the process
2.

findOne(selector, element = document.documentElement) {
  return Element.prototype.querySelector.call(element, selector);
},

fails then.

The Drupal.dialog() this should show is from commerce_add_to_cart_confirmation module:

https://git.drupalcode.org/project/commerce_add_to_cart_confirmation/-/b...

const confirmationModal = Drupal.dialog(
          `<div>${popupContent}</div>`,
          {
            title: popupTitle,
            dialogClass: 'commerce-confirmation-popup',
            width: 745,
            height: 375,
            maxWidth: '95%',
            autoResize: true,
            resizable: false,
            close(event) {
              event.target.remove();
            },
          },
        );

I also found similar implementations in core, e.g. web/core/modzles/editor/js/editor.js

Well, seems like the trouble starts with line 154 of dialog.js:
$element.modal('show');

I'm running out of ideas... :/

I'm postponing this myself as I think this is a custom issue, maybe because our radix subtheme was based on too old JS code or any things we changed custom.

In a fresh 6.0.x-dev radix child theme this works great, so hopefully we'll be able to find the root cause for our case. If someone else runs into this, perhaps the documentation here helps to better track it down or connect.

The dialog overrides are currently commented out in the starter kit. Absent more info, it seems like this a) isn't currently being supported in v6 and maybe even works properly. Please re-open if there's additional information or issues.

Hi @danchadwick thank you!

Just to let you know - dialog overrides work fine for us now! If I remember correctly, the reason was a difference in a twig or JavaScript file. I think because JavaScript files are not inherited, but copied, so changes were not present after an update...

So yes I think this is fixed, and the dialog feature might be enabled by default in the future, it's really helpful and the jQuery UI dialogs in Drupal are just ugly pain ;)

@anybody - Could I impose on you to educate me on how to use the dialog overrides. What I tried was:
- Disable bootstrap4_modal, which I was previously using.
- Comment back in the library overrides for dialog.js and dialog.ajax.js in my info file.
- Change my triggering link to be have the attributes data-bs-toggle='modal' data-bs-target:='#drupal-modal'. I tried it both with and without a class of 'use-ajax', which didn't seem to matter.

When the link is triggered, I see a dialog start to be displayed. I see the ajax network traffic returning the form from the route. But the contents of the form don't make it to the pop-up dialog ( the div with class modal-content is empty).

Can you point me at some better instructions for using these dialogs? Maybe we can get usage documented and have them enabled in the starter kit. TIA

After discussion with @doxigo, I think we should leave this commented out. It causes problems with (at least) layout builder. Until it's solid, I think it's better to opt-in.

Still interested in instructions for using it. If found, I'll add it to the documentation somewhere (like maybe in the dialog component's .mdx file).

@danchadwick yes for sure, I or @thomas.frobieter will report back here, just a lot of work...

@danchadwick First of all: We don't use Layout Builder anymore in our projects, so we simply accept that its currently broken.

I am not sure about the required custom link attributes, we currently use it only with the Commerce add to cart modal and with Webform like this:

<a href="/webform/feedback" class="webform-dialog" data-once="webform-dialog">
  Feedback
</a>

If I remind correctly, these where the required code changes:

https://gitlab.com/webksde-public/drupal/drowl_base/-/blob/2.x/drowl_bas...
https://gitlab.com/webksde-public/drupal/drowl_base/-/blob/2.x/drowl_bas...
https://gitlab.com/webksde-public/drupal/drowl_base/-/blob/2.x/drowl_bas...

These changes might not be required:
https://gitlab.com/webksde-public/drupal/drowl_base/-/blob/2.x/drowl_bas...
https://gitlab.com/webksde-public/drupal/drowl_base/-/blob/2.x/drowl_bas...

Thanks @thomas.frobieter for taking over!! @danchadwick should you have any further questions, feel free to reach out! :)

This seems to be a webform thing, which wouldn't apply to Radix in general.
https://www.drupal.org/node/2972533 →

I'm going to leave this closed, but if anyone can supply instructions to use bootstrap modal with radix natively (i.e. not with webform), please do re-open.

@danchadwick This also works for other cases in Drupal, not just for Webform! @thomas.frobieter's example is a webform example, but adding the use-ajax class for links in Drupal also works to open the link in a modal!

See https://www.drupal.org/docs/develop/drupal-apis/ajax-api/ajax-dialog-box... →

It's just not well known, I think. And the required libraries have to be loaded on the page!

@anybody. Thanks. The part I was missing was just to create the link just like you would for any other core Ajax dialog. I created README_DIALOG.mdx in the starterkit to document exactly how to get core Ajax dialogs working. It not hard, but thinking too hard had me reading Bootstrap documentation, which is a step in the wrong direction.

Thank you @danchadwick that's great :)