Add fomantic-dropdown webcomponent

[McRaeAlex]

Closes #33532

Using a vanilla web component add the correct event listener for handling dropdowns.

Screen.Recording.2025-02-25.at.1.38.41.PM.mov

[delvh]

Pity to see more jQuery usage, but I know that there is no way around that for now

[silverwind]

I see the size of the webpack chunk did not change, which means webpack is not bundling anything extra into that chunk:

asset js/webcomponents.js 87.9 KiB

So I guess this is more like a convenience-only thing right now.

[lunny]

What's the long-term plan for the new component? Will it be applied to all other menus? Maybe it's a placeholder for a rewritten, so that we can have a name without related to fomantic-ui.

[McRaeAlex]

@lunny @silverwind Right now this is a small wrapper to ensure event listeners are correctly added. This enabled the use of dropdowns in both vuejs and when dynamically added to pages without manually adding the $(el).dropdown() call.

Longer term I would like to work with you to figure out a roadmap for #29849 which would eventually replace this code. For example I tried out shoelace.style for this and it seems promising but limiting in the ability to style it.

[wxiaoguang]

Sorry, we can't do that.

The dropdown is quite special, we already have a complex system to init various dropdowns correctly. This approach

    if (window.jQuery) {
      window.$(this).dropdown();
    }

will definitely break.

[wxiaoguang]

The real problem is in onShowMoreFiles, it forgets to init the dropdowns (and maybe other elements).

The proper fix is to init necessary elements in onShowMoreFiles, but not using the fragile webcomopnent.

[wxiaoguang]

Need to call init functions instead of using webcomponent

For example: initCompReactionSelector and others.

Webcomponent won't help too much for our case. At the moment, the best approach I can think of is: #33498 (comment)

---

<button data-global-click="show-panel"></button>
<a data-global-click="link-acton"></a>
<div class="dropdown" data-global-init="initMyDropdown"></div>
<div class="editor" data-global-init="initComboMarkdownDropdown"></div>
<input name="avatar" data-global-init="initAvatarUploaderWithCropper">

Then we could resolve many longstanding problems:

1. avoid many duplicate "init" calls
2. incorrect init & double init (especially when use htmx or partial reloading)

[McRaeAlex]

Sorry, we can't do that.

The dropdown is quite special, we already have a complex system to init various dropdowns correctly. This approach

    if (window.jQuery) {
      window.$(this).dropdown();
    }

will definitely break.

Can you explain why you believe this code is fragile?

Need to call init functions instead of using webcomponent

For example: initCompReactionSelector and others.

I don't see why #33498 (comment) is better than wrapping that init call into a web component for example <combo-markdown-dropdown class="editor" />.