From d729ba6ea6845f68cbd820849ce0232e1b370e73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Brand=C3=A9ho?= <thomas.brandeho@gmail.com>
Date: Thu, 18 May 2023 21:44:49 +0200
Subject: [PATCH] Add Autofocus for components (#1053)

---
 pynecone/.templates/jinja/web/pages/index.js.jinja2 | 5 ++++-
 pynecone/.templates/jinja/web/pages/utils.js.jinja2 | 2 +-
 pynecone/components/component.py                    | 4 ++++
 pynecone/pc.py                                      | 2 +-
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/pynecone/.templates/jinja/web/pages/index.js.jinja2 b/pynecone/.templates/jinja/web/pages/index.js.jinja2
index 52a71b973..01a22f9ae 100644
--- a/pynecone/.templates/jinja/web/pages/index.js.jinja2
+++ b/pynecone/.templates/jinja/web/pages/index.js.jinja2
@@ -18,7 +18,8 @@ export default function Component() {
   const {{const.socket}} = useRef(null)
   const { isReady } = {{const.router}}
   const { {{const.color_mode}}, {{const.toggle_color_mode}} } = {{const.use_color_mode}}()
-
+  const focusRef = useRef();
+  
   const Event = (events, _e) => {
       preventDefault(_e);
       {{state_name|react_setter}}({
@@ -55,6 +56,8 @@ export default function Component() {
 
       await updateState({{state_name}}, {{state_name|react_setter}}, {{const.result}}, {{const.result|react_setter}}, {{const.router}}, {{const.socket}}.current)
     }
+    if (focusRef.current)
+      focusRef.current.focus();
     update()
   })
   useEffect(() => {
diff --git a/pynecone/.templates/jinja/web/pages/utils.js.jinja2 b/pynecone/.templates/jinja/web/pages/utils.js.jinja2
index 731cac49d..a19a51096 100644
--- a/pynecone/.templates/jinja/web/pages/utils.js.jinja2
+++ b/pynecone/.templates/jinja/web/pages/utils.js.jinja2
@@ -23,7 +23,7 @@
 {#     component: component dictionary #}
 {% macro render_self_close_tag(component) %}
 {%- if component.name|length %}
-<{{ component.name }} {{- render_props(component.props) }}/>
+<{{ component.name }} {{- render_props(component.props) }}{% if component.autofocus %} ref={focusRef} {% endif %}/>
 {%- else %}
   {{- component.contents }}
 {%- endif %}
diff --git a/pynecone/components/component.py b/pynecone/components/component.py
index 1540b02ca..ef20c9321 100644
--- a/pynecone/components/component.py
+++ b/pynecone/components/component.py
@@ -61,6 +61,9 @@ class Component(Base, ABC):
     # Special component props.
     special_props: Set[Var] = set()
 
+    # Whether the component should take the focus once the page is loaded
+    autofocus: bool = False
+
     @classmethod
     def __init_subclass__(cls, **kwargs):
         """Set default properties.
@@ -420,6 +423,7 @@ class Component(Base, ABC):
                 contents=str(tag.contents),
                 props=tag.format_props(),
             ),
+            autofocus=self.autofocus,
         )
 
     def _get_custom_code(self) -> Optional[str]:
diff --git a/pynecone/pc.py b/pynecone/pc.py
index 851a154cf..4f0f0a4f2 100644
--- a/pynecone/pc.py
+++ b/pynecone/pc.py
@@ -84,7 +84,7 @@ def run(
     frontend_port = get_config().port if port is None else port
     backend_port = get_config().backend_port if backend_port is None else backend_port
 
-    # If --no-frontend-only and no --backend-only, then turn on frontend and backend both
+    # If no --frontend-only and no --backend-only, then turn on frontend and backend both
     if not frontend and not backend:
         frontend = True
         backend = True