Click away

lib/surface/components/events.ex

@@ -9,6 +9,9 @@ defmodule Surface.Components.Events do
       @doc "Triggered when the component receives click"
       prop click, :event
 
+      @doc "Triggered when a click event happens outside of the element"
+      prop click_away, :event
+
       @doc "Triggered when the page receives focus"
       prop window_focus, :event
 

lib/surface/components/utils.ex

@@ -88,6 +88,7 @@ defmodule Surface.Components.Utils do
     [
       event_to_opts(assigns.capture_click, :"phx-capture-click"),
       event_to_opts(assigns.click, :"phx-click"),
+      event_to_opts(assigns.click_away, :"phx-click-away"),
       event_to_opts(assigns.window_focus, :"phx-window-focus"),
       event_to_opts(assigns.window_blur, :"phx-window-blur"),
       event_to_opts(assigns.focus, :"phx-focus"),

test/surface/components/events_test.exs

@@ -47,6 +47,19 @@ defmodule Surface.Components.EventsTest do
            """
   end
 
+  test "click away event with parent live view as target" do
+    html =
+      render_surface do
+        ~F"""
+        <ComponentWithEvents click_away="my_click_away" />
+        """
+      end
+
+    assert html =~ """
+           <div phx-click-away="my_click_away"></div>
+           """
+  end
+
   test "click event with parent live view as target" do
     html =
       render_surface do