Error: cannot call methods on dialog prior to initialization; attempted to call method 'option'

Created on 6 September 2024, 3 months ago
Updated 11 September 2024, 3 months ago

Problem/Motivation

I'm seeing this error in our project CI with drupal dialogs:

Error: cannot call methods on dialog prior to initialization; attempted to call method 'option'

This happens, when opening and immediately closing a modal (very fast).

Steps to reproduce

It's quite easy to reproduce with any modal and some JS code:
- click button to open modal,
- wait for .ui-dialog element to exist/be visible,
- and immediately close modal with cancel/close button.

The MR contains a test to reproduce.
If needed here is a sample JS code:

function waitForElement(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                observer.disconnect();
                resolve(document.querySelector(selector));
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}


document.querySelector('{open modal button selector}').click();
waitForElement('.ui-dialog').then((dialog) => {
    dialog.querySelector('{close button selector}').click();
});

Proposed resolution

It seems that in such cases, Drupal.dialog.resetSize is called from debounce after the jquery dialog instance has been destroyed. This happens within 20ms (debounce/setTimeout interval).

Add a check ensuring we have a valid jquery dialog instance at the top of Drupal.dialog.resetSize.

Remaining tasks

?

User interface changes

None

Introduced terminology

None

API changes

None

Data model changes

None

Release notes snippet

None

πŸ› Bug report
Status

Needs review

Version

11.0 πŸ”₯

Component
JavascriptΒ  β†’

Last updated about 11 hours ago

Created by

πŸ‡§πŸ‡ͺBelgium herved

Live updates comments and jobs are added and updated live.
  • Needs subsystem maintainer review

    It is used to alert the maintainer(s) of a particular core subsystem that an issue significantly impacts their subsystem, and their signoff is needed (see the governance policy draft for more information). Also, if you use this tag, make sure the issue component is set to the correct subsystem. If an issue significantly impacts more than one subsystem, use needs framework manager review instead.

Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024