From 1cf46272ca40b5fc7dd9688500bf786bfb5052a0 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Thu, 10 Apr 2025 21:58:48 +0200
Subject: [PATCH 1/3] Fix dropdown on safari

---
 src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
index 4abedb749..adb294d92 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
@@ -7,7 +7,7 @@
 	@if (Model.IsPrimaryNavEnabled && current is { Group.Index: not null })
 	{
 		<div class="sticky top-0 py-6 bg-white z-10 border-b-1 border-grey-20 pr-4">
-			<div id="pages-dropdown" class="block group border-1 border-grey-20 rounded-sm font-sans relative">
+			<div tabindex="0" id="pages-dropdown" class="block group border-1 border-grey-20 rounded-sm font-sans relative">
 				<button class="w-full text-left grid grid-cols-[1fr_auto] cursor-pointer font-semibold gap-1 hover:text-black pl-4 pr-2 py-2 group-open:border-b-1 border-grey-20">
 					<div>
 						<a

From 177b9d652cccba72fd96c9cd85a0ab50c36cb329 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Thu, 10 Apr 2025 22:18:10 +0200
Subject: [PATCH 2/3] Make sure dropdown is closed in safari

---
 src/Elastic.Markdown/Assets/pages-nav.ts      | 20 +++++++++----------
 .../Slices/Layout/_TocTree.cshtml             |  2 ++
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/Elastic.Markdown/Assets/pages-nav.ts b/src/Elastic.Markdown/Assets/pages-nav.ts
index 4fb63856c..899a4d702 100644
--- a/src/Elastic.Markdown/Assets/pages-nav.ts
+++ b/src/Elastic.Markdown/Assets/pages-nav.ts
@@ -50,19 +50,19 @@ export function initNav() {
 
     const pagesDropdown = $('#pages-dropdown')
     if (pagesDropdown) {
-        const activeAnchor = $('a.pages-dropdown_active', pagesDropdown)
-        activeAnchor?.addEventListener('mousedown', (e) => {
-            e.preventDefault()
+        const anchors = $$('a', pagesDropdown)
+        anchors.forEach((a) => {
+            a.addEventListener('mousedown', (e) => {
+                e.preventDefault()
+            })
+            a.addEventListener('mouseup', () => {
+                if (document.activeElement instanceof HTMLElement) {
+                    document.activeElement.blur()
+                }
+            })
         })
     }
 
-    const allNavItems = $$('a', pagesNav)
-    allNavItems.forEach((link) => {
-        link.addEventListener('click', () => {
-            link.closest('details').removeAttribute('open')
-        })
-    })
-
     const navItems = $$(
         'a[href="' +
             window.location.pathname +
diff --git a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
index adb294d92..7e85291ab 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
@@ -11,6 +11,7 @@
 				<button class="w-full text-left grid grid-cols-[1fr_auto] cursor-pointer font-semibold gap-1 hover:text-black pl-4 pr-2 py-2 group-open:border-b-1 border-grey-20">
 					<div>
 						<a
+							tabindex="0"
 							class="pages-dropdown_active hover:underline text-blue-elastic hover:text-blue-elastic-100"
 							href="@current.Group.Index?.Url"
 							@Htmx.GetNavHxAttributes(true)>
@@ -37,6 +38,7 @@
 							if (item.Id == current?.Id) continue;
 							<li class="block">
 								<a
+									tabindex="0"
 									class="block py-2 px-4 hover:underline hover:text-black hover:bg-grey-10 active:bg-blue-elastic-70 active:text-white font-semibold @(item.Group.Id == Model.Tree.Id ? "text-blue-elastic" : "")"
 									href="@item.Group.Index.Url"
 									@Htmx.GetNavHxAttributes(false, "mouseover")>

From f66efd308f6a9fc1d1537f88de3fdb8a3e69e407 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Thu, 10 Apr 2025 22:20:47 +0200
Subject: [PATCH 3/3] Remove tabindex where not needed

---
 src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
index 7e85291ab..adb294d92 100644
--- a/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
@@ -11,7 +11,6 @@
 				<button class="w-full text-left grid grid-cols-[1fr_auto] cursor-pointer font-semibold gap-1 hover:text-black pl-4 pr-2 py-2 group-open:border-b-1 border-grey-20">
 					<div>
 						<a
-							tabindex="0"
 							class="pages-dropdown_active hover:underline text-blue-elastic hover:text-blue-elastic-100"
 							href="@current.Group.Index?.Url"
 							@Htmx.GetNavHxAttributes(true)>
@@ -38,7 +37,6 @@
 							if (item.Id == current?.Id) continue;
 							<li class="block">
 								<a
-									tabindex="0"
 									class="block py-2 px-4 hover:underline hover:text-black hover:bg-grey-10 active:bg-blue-elastic-70 active:text-white font-semibold @(item.Group.Id == Model.Tree.Id ? "text-blue-elastic" : "")"
 									href="@item.Group.Index.Url"
 									@Htmx.GetNavHxAttributes(false, "mouseover")>