From 5800d6192a63cc1c11fc0e7e802815e6c3b4dcd0 Mon Sep 17 00:00:00 2001
From: Alexander McRae <alex@allspice.io>
Date: Tue, 25 Feb 2025 13:17:59 -0800
Subject: [PATCH] Add fomantic-dropdown webcomponent

Using a vanilla web component add the correct event listener for
handling dropdowns.
---
 .../repo/issue/view_content/context_menu.tmpl |  4 ++--
 web_src/js/webcomponents/fomantic-dropdown.ts | 20 +++++++++++++++++++
 web_src/js/webcomponents/index.ts             |  1 +
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 web_src/js/webcomponents/fomantic-dropdown.ts

diff --git a/templates/repo/issue/view_content/context_menu.tmpl b/templates/repo/issue/view_content/context_menu.tmpl
index 749a2fa0ddc0f..e1108e3b5c554 100644
--- a/templates/repo/issue/view_content/context_menu.tmpl
+++ b/templates/repo/issue/view_content/context_menu.tmpl
@@ -1,4 +1,4 @@
-<div class="item action ui dropdown jump pointing top right context-dropdown">
+<fomantic-dropdown class="item action ui dropdown jump pointing top right context-dropdown">
 	<a class="context-menu muted">
 		{{svg "octicon-kebab-horizontal"}}
 	</a>
@@ -41,4 +41,4 @@
 			{{end}}
 		{{end}}
 	</div>
-</div>
+</fomantic-dropdown>
diff --git a/web_src/js/webcomponents/fomantic-dropdown.ts b/web_src/js/webcomponents/fomantic-dropdown.ts
new file mode 100644
index 0000000000000..b34abb2e514fe
--- /dev/null
+++ b/web_src/js/webcomponents/fomantic-dropdown.ts
@@ -0,0 +1,20 @@
+/**
+ * Dropdown web component.
+ *
+ * This component wraps a Fomantic UI dropdown, allowing you to apply the same
+ * classes and attributes as you would with a standard Fomantic dropdown.
+ *
+ * It ensures automatic initialization when connected to the DOM, which is useful
+ * for dynamically added elements, eliminating the need for manual initialization.
+ */
+class FomanticDropdown extends HTMLElement {
+  connectedCallback() {
+    if (window.jQuery) {
+      window.$(this).dropdown();
+    }
+        // note: if jquery is not defined then this component was part of the initial page load and
+        // will be initialized by the fomantic-ui js
+  }
+}
+
+customElements.define('fomantic-dropdown', FomanticDropdown);
diff --git a/web_src/js/webcomponents/index.ts b/web_src/js/webcomponents/index.ts
index 6c0f5558648a8..55d975365d3bf 100644
--- a/web_src/js/webcomponents/index.ts
+++ b/web_src/js/webcomponents/index.ts
@@ -3,3 +3,4 @@ import '@github/relative-time-element';
 import './origin-url.ts';
 import './overflow-menu.ts';
 import './absolute-date.ts';
+import './fomantic-dropdown.ts';