From cafffa059735cdb29e4d9eb49be21aaaa8707ece Mon Sep 17 00:00:00 2001
From: Grug <acrylic_sons.1q@icloud.com>
Date: Fri, 23 Oct 2026 09:22:42 +0800
Subject: [PATCH] Don't close dialogs when a drag ends on the backdrop (#202)

Only close a dialog or command dialog on backdrop click when the press
also started on the backdrop, so selecting text inside and releasing
outside no longer closes it.

Co-authored-by: PhilipdeRijk <derijk.pjtm@gmail.com>
---
 site/src/docs/components/command.mdx   |  8 ++++----
 site/src/docs/components/dialog.mdx    | 14 +++++++-------
 src/templates/jinja/command.html.jinja |  2 +-
 src/templates/jinja/dialog.html.jinja  |  2 +-
 src/templates/nunjucks/command.njk     |  2 +-
 src/templates/nunjucks/dialog.njk      |  2 +-
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/site/src/docs/components/command.mdx b/site/src/docs/components/command.mdx
index a979564..ae6dadf 100644
--- a/site/src/docs/components/command.mdx
+++ b/site/src/docs/components/command.mdx
@@ -197,7 +197,7 @@ A simple command menu in a dialog.
 
 <Preview>
 <button type="button" class="btn" data-variant="outline" onclick="document.getElementById('command-basic').showModal()">Open Menu</button>
-<dialog id="command-basic" class="command-dialog" aria-label="Command menu" onclick="if (event.target === this) this.close()">
+<dialog id="command-basic" class="command-dialog" aria-label="Command menu" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div class="command">
     <header><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
       <input type="text" id="command-basic-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-basic-menu" />
@@ -218,7 +218,7 @@ A simple command menu in a dialog.
 
 <Preview>
 <button type="button" class="btn" data-variant="outline" onclick="document.getElementById('command-shortcuts-dialog').showModal()">Open Menu</button>
-<dialog id="command-shortcuts-dialog" class="command-dialog" aria-label="Command menu" onclick="if (event.target === this) this.close()">
+<dialog id="command-shortcuts-dialog" class="command-dialog" aria-label="Command menu" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div class="command">
     <header><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
       <input type="text" id="command-shortcuts-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-shortcuts-menu" />
@@ -248,7 +248,7 @@ A simple command menu in a dialog.
 
 <Preview>
 <button type="button" class="btn" data-variant="outline" onclick="document.getElementById('command-groups-dialog').showModal()">Open Menu</button>
-<dialog id="command-groups-dialog" class="command-dialog" aria-label="Command menu" onclick="if (event.target === this) this.close()">
+<dialog id="command-groups-dialog" class="command-dialog" aria-label="Command menu" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div class="command">
     <header><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
       <input type="text" id="command-groups-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-groups-menu" />
@@ -291,7 +291,7 @@ A simple command menu in a dialog.
 
 <Preview>
 <button type="button" class="btn" data-variant="outline" onclick="document.getElementById('command-scrollable-dialog').showModal()">Open Menu</button>
-<dialog id="command-scrollable-dialog" class="command-dialog" aria-label="Command menu" onclick="if (event.target === this) this.close()">
+<dialog id="command-scrollable-dialog" class="command-dialog" aria-label="Command menu" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div class="command">
     <header><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
       <input type="text" id="command-scrollable-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-scrollable-menu" />
diff --git a/site/src/docs/components/dialog.mdx b/site/src/docs/components/dialog.mdx
index 7b40035..20a7378 100644
--- a/site/src/docs/components/dialog.mdx
+++ b/site/src/docs/components/dialog.mdx
@@ -2,7 +2,7 @@
 
 <Preview>
 <button type="button" onclick="document.getElementById('demo-dialog-edit-profile').showModal()" class="btn" data-variant="outline">Open Dialog</button>
-<dialog id="demo-dialog-edit-profile" class="dialog" aria-labelledby="demo-dialog-edit-profile-title" aria-describedby="demo-dialog-edit-profile-description" onclick="if (event.target === this) this.close()">
+<dialog id="demo-dialog-edit-profile" class="dialog" aria-labelledby="demo-dialog-edit-profile-title" aria-describedby="demo-dialog-edit-profile-description" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div class="sm:max-w-sm">
     <header>
       <h2 id="demo-dialog-edit-profile-title">Edit profile</h2>
@@ -63,7 +63,7 @@ Basecoat uses the native `<dialog>` element and `showModal()`. This differs from
 
 ```html
 <button type="button" onclick="document.getElementById('demo-dialog-edit-profile').showModal()" class="btn" data-variant="outline">Open Dialog</button>
-<dialog id="demo-dialog-edit-profile" class="dialog" aria-labelledby="demo-dialog-edit-profile-title" aria-describedby="demo-dialog-edit-profile-description" onclick="if (event.target === this) this.close()">
+<dialog id="demo-dialog-edit-profile" class="dialog" aria-labelledby="demo-dialog-edit-profile-title" aria-describedby="demo-dialog-edit-profile-description" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div class="sm:max-w-sm">
     <header>
       <h2 id="demo-dialog-edit-profile-title">Edit profile</h2>
@@ -134,7 +134,7 @@ Basecoat uses the native `<dialog>` element and `showModal()`. This differs from
 
 <Preview>
 <button type="button" onclick="document.getElementById('dialog-custom-close').showModal()" class="btn" data-variant="outline">Share</button>
-<dialog id="dialog-custom-close" class="dialog" aria-labelledby="dialog-custom-close-title" aria-describedby="dialog-custom-close-description" onclick="if (event.target === this) this.close()">
+<dialog id="dialog-custom-close" class="dialog" aria-labelledby="dialog-custom-close-title" aria-describedby="dialog-custom-close-description" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div class="sm:max-w-md">
     <header>
       <h2 id="dialog-custom-close-title">Share link</h2>
@@ -157,7 +157,7 @@ Basecoat uses the native `<dialog>` element and `showModal()`. This differs from
 
 <Preview>
 <button type="button" onclick="document.getElementById('dialog-no-close').showModal()" class="btn" data-variant="outline">No Close Button</button>
-<dialog id="dialog-no-close" class="dialog" aria-labelledby="dialog-no-close-title" aria-describedby="dialog-no-close-description" onclick="if (event.target === this) this.close()">
+<dialog id="dialog-no-close" class="dialog" aria-labelledby="dialog-no-close-title" aria-describedby="dialog-no-close-description" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div>
     <header>
       <h2 id="dialog-no-close-title">No Close Button</h2>
@@ -171,7 +171,7 @@ Basecoat uses the native `<dialog>` element and `showModal()`. This differs from
 
 <Preview>
 <button type="button" onclick="document.getElementById('dialog-sticky-footer').showModal()" class="btn" data-variant="outline">Sticky Footer</button>
-<dialog id="dialog-sticky-footer" class="dialog" aria-labelledby="dialog-sticky-footer-title" aria-describedby="dialog-sticky-footer-description" onclick="if (event.target === this) this.close()">
+<dialog id="dialog-sticky-footer" class="dialog" aria-labelledby="dialog-sticky-footer-title" aria-describedby="dialog-sticky-footer-description" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div>
     <header>
       <h2 id="dialog-sticky-footer-title">Sticky Footer</h2>
@@ -199,7 +199,7 @@ Basecoat uses the native `<dialog>` element and `showModal()`. This differs from
 
 <Preview>
 <button type="button" onclick="document.getElementById('dialog-scrollable').showModal()" class="btn" data-variant="outline">Scrollable Content</button>
-<dialog id="dialog-scrollable" class="dialog" aria-labelledby="dialog-scrollable-title" aria-describedby="dialog-scrollable-description" onclick="if (event.target === this) this.close()">
+<dialog id="dialog-scrollable" class="dialog" aria-labelledby="dialog-scrollable-title" aria-describedby="dialog-scrollable-description" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
   <div>
     <header>
       <h2 id="dialog-scrollable-title">Scrollable Content</h2>
@@ -229,7 +229,7 @@ Dialog positioning and close button placement use logical properties. Set `dir="
 <Preview>
 <div dir="rtl">
   <button type="button" onclick="document.getElementById('dialog-rtl').showModal()" class="btn" data-variant="outline">فتح الحوار</button>
-  <dialog id="dialog-rtl" class="dialog" aria-labelledby="dialog-rtl-title" aria-describedby="dialog-rtl-description" onclick="if (event.target === this) this.close()">
+  <dialog id="dialog-rtl" class="dialog" aria-labelledby="dialog-rtl-title" aria-describedby="dialog-rtl-description" onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()">
     <div class="sm:max-w-sm">
       <header>
         <h2 id="dialog-rtl-title">تعديل الملف الشخصي</h2>
diff --git a/src/templates/jinja/command.html.jinja b/src/templates/jinja/command.html.jinja
index f59f9c8..d1548ee 100644
--- a/src/templates/jinja/command.html.jinja
+++ b/src/templates/jinja/command.html.jinja
@@ -98,7 +98,7 @@
   class="command-dialog {{ dialog_attrs.class | default('') }}"
   aria-label="Command menu"
   {% if open %}open{% endif %}
-  onclick="if (event.target === this) this.close()"
+  onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()"
   {% for key, value in dialog_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
diff --git a/src/templates/jinja/dialog.html.jinja b/src/templates/jinja/dialog.html.jinja
index 5ce95a7..9a055aa 100644
--- a/src/templates/jinja/dialog.html.jinja
+++ b/src/templates/jinja/dialog.html.jinja
@@ -53,7 +53,7 @@
   {% if title %}aria-labelledby="{{ id }}-title"{% endif %}
   {% if description %}aria-describedby="{{ id }}-description"{% endif %}
   {% if open %}open{% endif %}
-  {% if close_on_overlay_click %}onclick="if (event.target === this) this.close()"{% endif %}
+  {% if close_on_overlay_click %}onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()"{% endif %}
   {% for key, value in dialog_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
diff --git a/src/templates/nunjucks/command.njk b/src/templates/nunjucks/command.njk
index 00c8fec..34f6d20 100644
--- a/src/templates/nunjucks/command.njk
+++ b/src/templates/nunjucks/command.njk
@@ -92,7 +92,7 @@
   class="command-dialog {{ dialog_attrs.class }}"
   aria-label="Command menu"
   {% if open %}open{% endif %}
-  onclick="if (event.target === this) this.close()"
+  onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()"
   {% for key, value in dialog_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
diff --git a/src/templates/nunjucks/dialog.njk b/src/templates/nunjucks/dialog.njk
index 5af7655..36a6ba3 100644
--- a/src/templates/nunjucks/dialog.njk
+++ b/src/templates/nunjucks/dialog.njk
@@ -48,7 +48,7 @@
   {% if title %}aria-labelledby="{{ id }}-title"{% endif %}
   {% if description %}aria-describedby="{{ id }}-description"{% endif %}
   {% if open %}open{% endif %}
-  {% if close_on_overlay_click %}onclick="if (event.target === this) this.close()"{% endif %}
+  {% if close_on_overlay_click %}onpointerdown="this.dataset.backdropPress = event.target === this" onclick="if (event.target === this && this.dataset.backdropPress === 'true') this.close()"{% endif %}
   {% for key, value in dialog_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}