Fix outside modifier (#425)

* Fix outside modifier

* Add release note

CHANGELOG.md

@@ -8,4 +8,8 @@
 
 ### Changed
 
-- Changed the `data-attributes` attribute to `data-attr`.
+- Changed the `data-attributes` attribute to `data-attr` ([#422](https://github.com/starfederation/datastar/issues/422)).
+
+### Fixed
+
+- Fixed the outside modifier so that elements contained within it are ignored ([#425](https://github.com/starfederation/datastar/issues/425)).

library/src/plugins/official/dom/attributes/on.ts

@@ -118,17 +118,10 @@ export const On: AttributePlugin = {
         if (testOutside) {
           target = document
           const cb = callback
-          let called = false
           const targetOutsideCallback = (e?: Event) => {
             const targetHTML = e?.target as HTMLElement
-            if (!targetHTML) return
-            const isEl = el.id === targetHTML.id
-            if (isEl && called) {
-              called = false
-            }
-            if (!isEl && !called) {
+            if (!el.contains(targetHTML)) {
               cb(e)
-              called = true
             }
           }
           callback = targetOutsideCallback

site/routes_examples.go

@@ -101,6 +101,7 @@ func setupExamples(ctx context.Context, router chi.Router, signals sessions.Stor
 				{ID: "templ_counter"},
 				{ID: "form_data"},
 				{ID: "custom_validity"},
+				{ID: "click_outside"},
 			},
 		},
 	}

site/routes_home.templ

@@ -291,7 +291,7 @@ templ TodoInput(i int) {
 			input.value = '';
 		`, i) }
 		if i >= 0 {
-			data-on-click.outside:capture={ datastar.PutSSE("/api/todos/cancel") }
+			data-on-click__outside={ datastar.PutSSE("/api/todos/cancel") }
 		}
 	/>
 }

site/static/md/examples/click_outside.md

@@ -0,0 +1,31 @@
+## Click Outside
+
+## Demo
+
+<div data-signals-open="false" data-on-click__outside="open.value ? open.value = false : null" >
+  <div data-show="open.value" class="p-10 bg-green-700">
+    <div class="p-10 bg-red-700">
+      Click anywhere outside the green box to close
+    </div>
+  </div>
+  <button data-on-click="open.value = true" data-show="!open.value" class="btn btn-primary">
+    Open a box
+  </button>
+</div>
+
+## Explanation
+
+The `__outsite` modifier is used to listen to clicks outside the element.
+
+```html
+<div data-signals-open="false" data-on-click__outside="open.value ? open.value = false : null" >
+  <div data-show="open.value" class="p-10 bg-green-700">
+    <div class="p-10 bg-red-700">
+      Click anywhere outside the green box to close
+    </div>
+  </div>
+  <button data-on-click="open.value = true" data-show="!open.value">
+    Open a box
+  </button>
+</div>
+```

site/static/md/reference/attribute_plugins.md

@@ -176,6 +176,7 @@ Modifiers allow you to modify behavior when events are triggered. Some modifiers
   - `.noleading` - Throttle without leading edge.
   - `.trail` - Throttle with trailing edge.
 - `__window` - Attaches the event listener to the `window` element.
+- `__outsite` - Triggers when the event is outside the element.
 - `__prevent` - Calls `preventDefault` on the event listener.
 - `__stop` - Calls `stopPropagation` on the event listener.