Problem/Motivation

I think maybe this change (https://www.drupal.org/project/flag/issues/3555233) doesn't take proper account of all the possible configurations that a Flag can have. Specifically, an AJAX error is thrown when flagging a node via 'dialog'-style flag forms.

Steps to reproduce

  • Set up a basic Drupal site using `drupal/recommended-project` eg. as here https://docs.ddev.com/en/latest/users/quickstart/#drupal
  • Create a new 'Content' Flag type, choosing 'Dialog' as the 'Form behavior'
  • Create and publish a new Basic Page node
  • View the new node
  • Click the 'Flag this item' link
  • Click the 'Create flagging' button in the dialog that appears

The flag state changes on the page but the dialog box doesn't close and an AJAX error is visible in the browser console:

`An error occurred during the execution of the Ajax response: Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'`

Proposed resolution

I don't understand the lifecycle of the dialog component well enough to propose a proper resolution, but a quick-and-dirty patch to check for a behavior type of 'modal' as well as for an XMLHttpRequest context when deciding whether to add the `#ajax` key to the submit button render array has stopped the issue occurring for me (albeit at the expense of a page reload vs. the nicer intended AJAX behaviour).

Remaining tasks

Come up with and implement a version of the AJAX link decoration logic that works properly with all variations on the 'Form Behavior' option.

Issue fork flag-3625010

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:

Comments

tomdearden created an issue. See original summary.

tomdearden’s picture

Issue summary: View changes
andres alvarez’s picture

Version: 5.1.0 » 5.1.x-dev

andres alvarez’s picture

The AJAX submit handlers added in #3555233 always return CloseModalDialogCommand, which targets #drupal-modal. With the "Dialog" form behavior the confirm form is opened in a randomly suffixed #drupal-dialog-* element instead, and core's dialog.ajax.js always keeps an empty, uninitialized #drupal-modal div on the page, which is what triggers the "prior to initialization" error.

Rather than dropping #ajax for non-modal dialogs, non-modal flag links now pass a deterministic dialog target (FormEntryTypeBase::getDialogTargetId()), and the confirm/unflag forms close that dialog with CloseDialogCommand, keeping CloseModalDialogCommand for the modal behavior. Added testDialogOption() to ModalFormTest; it fails without the fix (dialog stays open) and passes with it, and the existing modal and confirm form tests still pass. MR !232, pipeline green.

andres alvarez’s picture

Status: Active » Needs review

ivnish made their first commit to this issue’s fork.

ivnish’s picture

Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.