diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
index 0dc924c39..dcea9bdf9 100644
--- a/app/javascript/controllers/dialog_controller.js
+++ b/app/javascript/controllers/dialog_controller.js
@@ -27,4 +27,8 @@ export default class extends Controller {
   close() {
     this.dialogTarget.close()
   }
+
+  closeOnClickOutside({ target }) {
+    if (!this.element.contains(target)) this.close()
+  }
 }
diff --git a/app/views/bubbles/_filters.html.erb b/app/views/bubbles/_filters.html.erb
index d6a3b9a97..b8aaa7f89 100644
--- a/app/views/bubbles/_filters.html.erb
+++ b/app/views/bubbles/_filters.html.erb
@@ -1,5 +1,5 @@
 <h1 class="txt-large">
-  <div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close">
+  <div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
     <button class="btn btn--plain filter__button" data-action="click->dialog#toggle" data-dialog-modal-value="true">
       <% if params[:popped] %>
         Popped
@@ -22,7 +22,7 @@
 
   in
 
-  <div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close">
+  <div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
     <button class="btn btn--plain filter__button" data-action="click->dialog#toggle" data-dialog-modal-value="true">
       <%= bucket.name %>
     </button>
@@ -40,7 +40,7 @@
 <h2 class="txt-medium">
   <%= tag ? "Tagged" : "with" %>
 
-  <div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close">
+  <div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
     <button class="btn btn--plain filter__button" data-action="click->dialog#toggle" data-dialog-modal-value="true">
       <%= tag&.title || "any tag" %>
     </button>
@@ -63,7 +63,7 @@
 
   and
 
-  <div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close">
+  <div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
     <button class="btn btn--plain filter__button" data-action="click->dialog#toggle" data-dialog-modal-value="true">
       assigned to <%= assignee&.name || "anyone" %>
     </button>