Add Autofocus for components (#1053)

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(() => {

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 %}

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]:

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