From 51d60d7ddf8fcbe1cf12d8f158f99971a8df6697 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Sun, 13 Nov 2022 13:06:58 -0800
Subject: [PATCH] details-menu class to avoid accidential details closure

Refs https://github.com/simonw/datasette/issues/1871#issuecomment-1312821031
---
 datasette/templates/_close_open_menus.html | 2 +-
 datasette/templates/base.html              | 2 +-
 datasette/templates/database.html          | 2 +-
 datasette/templates/patterns.html          | 6 +++---
 datasette/templates/table.html             | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/datasette/templates/_close_open_menus.html b/datasette/templates/_close_open_menus.html
index 65eebddf..3302d77d 100644
--- a/datasette/templates/_close_open_menus.html
+++ b/datasette/templates/_close_open_menus.html
@@ -9,7 +9,7 @@ document.body.addEventListener('click', (ev) => {
     if (target && target.tagName == 'DETAILS') {
         detailsClickedWithin = target;
     }
-    Array.from(document.getElementsByTagName('details')).filter(
+    Array.from(document.querySelectorAll('details.details-menu')).filter(
         (details) => details.open && details != detailsClickedWithin
     ).forEach(details => details.open = false);
 });
diff --git a/datasette/templates/base.html b/datasette/templates/base.html
index 87c939ac..4b763398 100644
--- a/datasette/templates/base.html
+++ b/datasette/templates/base.html
@@ -19,7 +19,7 @@
 <div class="not-footer">
 <header><nav>{% block nav %}{% block crumbs %}{{ crumbs.nav(request=request) }}{% endblock %}
     {% set links = menu_links() %}{% if links or show_logout %}
-    <details class="nav-menu">
+    <details class="nav-menu details-menu">
         <summary><svg aria-labelledby="nav-menu-svg-title" role="img"
             fill="currentColor" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 16 16" width="16" height="16">
diff --git a/datasette/templates/database.html b/datasette/templates/database.html
index 863ba88c..7acf0369 100644
--- a/datasette/templates/database.html
+++ b/datasette/templates/database.html
@@ -13,7 +13,7 @@
 <div class="page-header" style="border-color: #{{ database_color(database) }}">
     <h1>{{ metadata.title or database }}{% if private %} 🔒{% endif %}</h1>
     {% set links = database_actions() %}{% if links %}
-    <details class="actions-menu-links">
+    <details class="actions-menu-links details-menu">
         <summary><svg aria-labelledby="actions-menu-links-title" role="img"
                 style="color: #666" xmlns="http://www.w3.org/2000/svg"
                 width="28" height="28" viewBox="0 0 24 24" fill="none"
diff --git a/datasette/templates/patterns.html b/datasette/templates/patterns.html
index 3f9b5a16..9905df2c 100644
--- a/datasette/templates/patterns.html
+++ b/datasette/templates/patterns.html
@@ -13,7 +13,7 @@
     <p class="crumbs">
         <a href="/">home</a>
     </p>
-    <details class="nav-menu">
+    <details class="nav-menu details-menu">
         <summary><svg aria-labelledby="nav-menu-svg-title" role="img"
             fill="currentColor" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 16 16" width="16" height="16">
@@ -96,7 +96,7 @@
 <section class="content">
     <div class="page-header" style="border-color: #ff0000">
         <h1>fixtures</h1>
-        <details class="actions-menu-links">
+        <details class="actions-menu-links details-menu">
             <summary><svg aria-labelledby="actions-menu-links-title" role="img"
                     style="color: #666" xmlns="http://www.w3.org/2000/svg"
                     width="28" height="28" viewBox="0 0 24 24" fill="none"
@@ -158,7 +158,7 @@
 <section class="content">
     <div class="page-header" style="border-color: #ff0000">
         <h1>roadside_attraction_characteristics</h1>
-        <details class="actions-menu-links">
+        <details class="actions-menu-links details-menu">
             <summary><svg aria-labelledby="actions-menu-links-title" role="img"
                     style="color: #666" xmlns="http://www.w3.org/2000/svg"
                     width="28" height="28" viewBox="0 0 24 24" fill="none"
diff --git a/datasette/templates/table.html b/datasette/templates/table.html
index e015cdfc..5820d09e 100644
--- a/datasette/templates/table.html
+++ b/datasette/templates/table.html
@@ -24,7 +24,7 @@
 <div class="page-header" style="border-color: #{{ database_color(database) }}">
     <h1>{{ metadata.title or table }}{% if is_view %} (view){% endif %}{% if private %} 🔒{% endif %}</h1>
     {% set links = table_actions() %}{% if links %}
-    <details class="actions-menu-links">
+    <details class="actions-menu-links details-menu">
         <summary><svg aria-labelledby="actions-menu-links-title" role="img"
                 style="color: #666" xmlns="http://www.w3.org/2000/svg"
                 width="28" height="28" viewBox="0 0 24 24" fill="none"