If we have set_focus() we need blur_focus(). (#5522)

* If we have `set_focus()` we need `blur_focus()`.

* Update reflex/.templates/web/utils/state.js

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* Making darglint happy

---------

Co-authored-by: Casey Riebe <cjriebe@sbgtv.com>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Author: 3 people

reflex/.templates/web/utils/state.js

@@ -295,6 +295,20 @@ export const applyEvent = async (event, socket, navigate, params) => {
     return false;
   }
 
+  if (event.name == "_blur_focus") {
+    const ref =
+      event.payload.ref in refs ? refs[event.payload.ref] : event.payload.ref;
+    const current = ref?.current;
+    if (current === undefined || current?.blur === undefined) {
+      console.error(
+        `No element found for ref ${event.payload.ref} in _blur_focus`,
+      );
+    } else {
+      current.blur();
+    }
+    return false;
+  }
+
   if (event.name == "_set_value") {
     const ref =
       event.payload.ref in refs ? refs[event.payload.ref] : event.payload.ref;

reflex/event.py

@@ -1025,6 +1025,22 @@ def set_focus(ref: str) -> EventSpec:
     )
 
 
+def blur_focus(ref: str) -> EventSpec:
+    """Blur focus of specified ref.
+
+    Args:
+        ref: The ref.
+
+    Returns:
+        An event to blur focus on the ref
+    """
+    return server_side(
+        "_blur_focus",
+        get_fn_signature(blur_focus),
+        ref=LiteralVar.create(format.format_ref(ref)),
+    )
+
+
 def scroll_to(elem_id: str, align_to_top: bool | Var[bool] = True) -> EventSpec:
     """Select the id of a html element for scrolling into view.
 
@@ -2293,6 +2309,7 @@ def wrapper(
     back = staticmethod(back)
     window_alert = staticmethod(window_alert)
     set_focus = staticmethod(set_focus)
+    blur_focus = staticmethod(blur_focus)
     scroll_to = staticmethod(scroll_to)
     set_value = staticmethod(set_value)
     remove_cookie = staticmethod(remove_cookie)

tests/units/test_event.py

@@ -262,16 +262,24 @@ def test_event_window_alert():
     )
 
 
-def test_set_focus():
-    """Test the event set focus function."""
-    spec = event.set_focus("input1")
+@pytest.mark.parametrize(
+    ("func", "qualname"), [("set_focus", "_set_focus"), ("blur_focus", "_blur_focus")]
+)
+def test_focus(func: str, qualname: str):
+    """Test the event set focus function.
+
+    Args:
+        func: The event function name.
+        qualname: The sig qual name passed to JS.
+    """
+    spec = getattr(event, func)("input1")
     assert isinstance(spec, EventSpec)
-    assert spec.handler.fn.__qualname__ == "_set_focus"
+    assert spec.handler.fn.__qualname__ == qualname
     assert spec.args[0][0].equals(Var(_js_expr="ref"))
     assert spec.args[0][1].equals(LiteralVar.create("ref_input1"))
-    assert format.format_event(spec) == 'Event("_set_focus", {ref:"ref_input1"})'
-    spec = event.set_focus("input1")
-    assert format.format_event(spec) == 'Event("_set_focus", {ref:"ref_input1"})'
+    assert format.format_event(spec) == f'Event("{qualname}", {{ref:"ref_input1"}})'
+    spec = getattr(event, func)("input1")
+    assert format.format_event(spec) == f'Event("{qualname}", {{ref:"ref_input1"}})'
 
 
 def test_set_value():