more_actions.js prevents form submit if there is a form embeded in CKEditor

I encountered an issue with finding the Webform button in CKEditor. Could you please provide more information about the Drupal version and Webform module version being used? This would help me better understand the issue.

I am actually having the same issue, but rather with the masquerade module (version 2), which provides a form block for masquerading. The "for" attribute on the save button in the gin sticky actions bar is pointing to "edit-submit--2" (which is the masquerade form, at least on entity edit pages) rather than "edit-submit" (which is my drupal entity form). So when I click save, same thing, the focus shifts to the masquerade form rather than saving my entity.

Also, I am on Drupal 11.2.2

I'm wondering if we can just change

const formActions = form.querySelector('[data-drupal-selector="edit-actions"]');
to
const formActions = form.querySelector('[id="edit-actions"]');

because I think using data-drupal-selector it is just finding the first instance (which may be the wrong one, but it would never be wrong if we selected by id instead (unless the edit actions in the wrong form got assigned that value I guess).

I tried making this change and testing, but I can't seem to get drupal to load the updated version of my js file no matter what I do. I turned off js aggregation. cleared all caches via the UI and via drush.

Is there something simple I am missing here?

There was. I needed to compile!

I accidentally made the MR against 5.0.x, but I don't think it should matter. The same issue is present across versions 3, 4, and 5, and I think the patch should apply to all 3.

I was wrong, adding a patch for 8.x-3.x

Sorry that was empty (having a lot of technical difficulties today). Once again, a patch for 8.x-3.x

Updating the title to reflect behavior. Based on the updated code, my assumption is that this is only a problem when the additional form (and its form actions) occur before the form actions of the main form. I believe the query selector just grabs the first set of "edit-actions" and then sets the sticky save button to point to the first one it finds. This is why I think using id as the selector will be better than using the data-drupal-selector. This js fails to perform its intended purpose when there are multiple elements with a data-drupal-selector with the value "edit-actions"

I'll review this.

Thank you! If you are able to reproduce the issue using the CKEditor method described in the issue description, that would be really helpful. I am really curious whether the problem described there and the problem I describe with the masquerade module are in fact caused by the same thing. I suspect that they are, but I have not tried the CKEditor embed myself.

Hello @megakeegman,
The mentioned issue of embedding a webform in CKEditor can be reproduced by following the steps below:

1. Install the webforms module
2. Create a simple webform with a required field
3. Install the Entity Embed module
4. Go to Configuration → Content authoring → Text editor embed buttons (/admin/config/content/embed). Add an embed button by selecting the entity type as webform.
5. Go to Configuration → Content authoring → Text formats and editors (/admin/config/content/formats). In one of the text formats, add the embed format in the active toolbar and enable Display embedded entities.
6. Create a node and embed a webform in CKEditor
7. Hit the "Save" button

The node should save, but the CKEditor textarea gets focused, preventing the node from being saved.
I applied the MR!648, which applied clearly in the Gin theme version 4.1.0. The issue of being unable to save the node still existed. I debugged the problem and IMO we can use the below snippet,

  // Check if button has class "webform-button--submit"
  if (button.classList.contains('webform-button--submit')) {
     return;
  }

This worked for this issue. However, I wasn't able to replicate the issue using the masquerade module. Can you provide detailed steps to replicate the issue? Moving to NW.
Thanks