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

CommentFileSizeAuthor
#9 3472624-nr-bot.txt1.05 KBneeds-review-queue-bot

Issue fork drupal-3472624

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

herved created an issue. See original summary.

herved opened merge request !9440

herved’s picture

herved commented
Issue summary: View changes
herved’s picture

herved commented
Issue summary: View changes
herved’s picture

herved commented
Status: Active » Needs review

Moving to needs review, thanks.

PS: It seems nightwatch has intermittent failures these days, phpunit as well

herved’s picture

herved commented
Related issues: +#3356667: Error: Cannot read properties of undefined (reading 'settings') with dialog.position.js

Linking #3356667: Error: Cannot read properties of undefined (reading 'settings') with dialog.position.js as possibly related (but not quite).

smustgrave’s picture

smustgrave commented
Issue tags: +Needs subsystem maintainer review

May be able to help decide the solution.

herved’s picture

herved commented
Related issues: +#2856047: Avoid random failures in JavascriptTestBase when testing functionality in a dialog

I believe #2856047: Avoid random failures in JavascriptTestBase when testing functionality in a dialog is also related, as I mentioned in #6.

needs-review-queue-bot’s picture

needs-review-queue-bot commented
Status: Needs review » Needs work
StatusFileSize
new 3472624-nr-bot.txt1.05 KB

The Needs Review Queue Bot tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

smustgrave’s picture

smustgrave commented
Status: Needs work » Needs review

False positive

saidatom’s picture

saidatom
Location Lisbon
commented
Status: Needs review » Reviewed & tested by the community

Great! It looks good, moving to RTBC.

dxvargas’s picture

dxvargas commented

I just want to confirm the RTBC.
The new version of the MR, after the last two commits managed to fix the problems in the pipeline I had before.

claudiu.cristea’s picture

claudiu.cristea
Primary language Romanian
Location Arad 🇷🇴
commented
Issue tags: +JavaScript
nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Reviewed & tested by the community » Needs work
Issue tags: -JavaScript +JavaScript

I can't seem to replicate the test failures. When I run the tests without the immediate and early return fix from the dialog.position.js file it's still green.

herved opened merge request !10069

joseph.olstad’s picture

joseph.olstad
Primary language French
commented

While this patch deals with dialog
I was hoping it would also fix resizable

I'm seeing this one:

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

Using a theme (not claro) for a node form.
This worked up until Drupal 10.4.x

In Drupal 11 there's a js error related to the media dialog.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Hi,

I have the same problem on a D10.4, with CKE5 in Layout Builder offcanvas, on a text format with the drupal media and/or the icon (from ui_icons) plugins.

When I click on the media insert button or the icon insert button, the error is immediately present in the browser's console.

herved’s picture

herved commented

#17 Hi @grimreaper,

Yes I also noticed these errors get triggered with CKeditor: https://git.drupalcode.org/project/drupal/-/merge_requests/9440#note_398735
Is this MR here fixing your issue?

There is also #3356667: Error: Cannot read properties of undefined (reading 'settings') with dialog.position.js which relates closely to this, maybe the patch there is is the proper fix?

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Hi @herved,

I tried the MR changes without success.

But those errors were not blocking me it was something else related to dialogs which I had not been able to identify.

Like events not triggerred or incorectly triggered (not the right element, stuff like that).

So I pass to something else for until now.

goz’s picture

goz commented

Hi, i have the same issue using ui_suite_bootstrap + layout_paragraphs + mercury_editor

In node edition with paragraph layout, start a new paragraph, choose a component (+ button), add your section paragraph in the first dialog, second dialog opened and error is logged in console

The MR does not solve this.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

albeorte’s picture

albeorte commented

The current MR is not solving the problem.