GlDisclosureDropdown does not work with link items which rely on @rails/ujs data-method handling

As described in gitlab!109534 (comment 1249824378), using GlDisclosureDropdown for links which rely on @rails/ujs handling is akward.

Using list-item custom rendering to declaratively add data-method links

Using a template similar to this:

<script>
const items = [{
  text: 'Foo',
  href: '/foo',
}];
</script>

<gl-disclosure-dropdown :items="items">
  <template #list-item="{ item }">
    <a
      data-method="post"
      tabindex="-1"
      :href="item.href"
    >
      {{ item.text }}
    </a>
  </template>
</gl-disclosure-dropdown>

The problem here is that the anchor element doesn't take the full width/height of the surrounding li element generated by the component. This means it's possible to click on the li and not the anchor. Since @rails/ujs relies on the event target being the anchor itself, it can't detect the click. GlDisclosureDropdown dispatches a synthetic click event on the anchor, but configures it not to bubble, so the @rails/ujs listener on the document never gets notified.

Using item.extraAttrs to set data-method

Using a template similar to this:

<script>
const items = [{
  text: 'Foo',
  href: '/foo',
  extraAttrs: {
    'data-method': 'post',
  },
}];
</script>

<template>
  <gl-disclosure-dropdown :items="items" />
</template>

This fails when the user presses Enter on an item, since the event is stopped, so the @rails/ujs listener on the document never gets notified.

Possible fixes

I suspect we will mark this wontfix, since @rails/ujs is deprecated in Rails 7, and we'll probably gradually move away from it anyway. But, we might be able to finesse the non-bubbling click event and the event stopping for other use cases (I don't know what right now)_.