Upgrade from 1.0.0 to 1.1.0 crashes with Delete button in shoelace menu

[gap777]

Here's my setup:

• button_to w/ confirmation
• in shoelace menu item

<sl-menu aria-labelledby="menu-button" aria-orientation="vertical" class="dropdown__items-container" role="menu" tabindex="-1">
  <sl-menu-item class="dropdown__item" role="menuitem" aria-disabled="false" tabindex="0">
      <form class="button_to" method="post" action="/media_planner/media_plans/mp_r7XdkBqzDTFAJzO7kLWZ">
           <input type="hidden" name="_method" value="delete" autocomplete="off">
           <button class="hidden-container" data-turbo-method="delete" data-turbo-frame="_top" data-turbo-confirm="true" data-confirm-title="Confirm Delete" data-confirm-message="Are you sure you want to delete the media plan Media Plan 1? This action cannot be undone." data-confirm-accept="<button class=&quot;btn-delete&quot;>Delete</button>" data-testid="media-plan-delete-button" type="submit">
               <div class="btn btn-default">Delete</div>
          </button>
      </form>
   </sl-menu-item>
</sl-menu>

Under 1.0.0, this works and correctly displays the confirmation.

Under 1.1.0, clicking the Delete button generates a JS error:

ConfirmationController.js:107 Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')
    at #slotContent (ConfirmationController.js:107:20)
    at #fillSlots (ConfirmationController.js:95:32)
    at #showConfirm (ConfirmationController.js:67:10)
    at ConfirmationController.perform (ConfirmationController.js:46:10)
    at HTMLDocument.<anonymous> (index.js:13:66)
    at dispatch2 (utils.js:3:10)
    at _FormSubmission.confirm2 (index.js:5:32)
    at _FormSubmission.start (turbo.es2017-esm.js:736:49)
    at Navigator.submitForm (turbo.es2017-esm.js:2346:29)
    at Session.formSubmitted (turbo.es2017-esm.js:3076:24)

The currentTarget is document (as expected, since the event handler registered rms init sets it so); the activeElement is the drop down menu itself (not the menu item).

[Jeremy-Walton]

The #clickTarget method was switched to use currentTarget.activeElement due to the fact that using a link_to was returning the document as the target whereas button_to returns the button itself.

The current implementation:

#clickTarget({currentTarget}) {
  // Turbo listens for link clicks on the document.
  if (currentTarget === document) {
    // in this case, activeElement is the link that was clicked
    return currentTarget.activeElement.closest(`[data-turbo-confirm]`)
  } else {
    return currentTarget.closest(`[data-turbo-confirm]`)
  }
}

As you mentioned, currentTarget is always going to be document and won't go down the second path.
While incorrect, this should still work with button_to since it should gain focus and become the activeElement. Custom elements break this though.

This issue is outlined here https://dev.to/open-wc/mind-the-document-activeelement-2o9a
Since custom elements have their own DOM (shadow DOM), the focus does not reach inside the custom element which is why the dropdown in your case is getting the focus.

We have a fix coming shortly that will address this issue.