Add URL auto-select and clear on successful submit

Improve user experience by automatically selecting the URL input
when focused and clearing the input field after a successful
submission. This reduces manual interaction and provides clearer
feedback on successful form submission.

1 files changed, 6 insertions, 0 deletions

diff --git a/Biz/PodcastItLater/Web.py b/Biz/PodcastItLater/Web.py
index 3493b7b..8897ce0 100644
--- a/Biz/PodcastItLater/Web.py
+++ b/Biz/PodcastItLater/Web.py
@@ -264,6 +264,7 @@ class SubmitForm(Component[AnyChildren, Attrs]):
                             "padding": "8px",
                             "margin": "4px 0",
                         },
+                        on_focus="this.select()",
                     ),
                 ),
                 html.button(
@@ -280,6 +281,11 @@ class SubmitForm(Component[AnyChildren, Attrs]):
                 hx_post="/submit",
                 hx_target="#submit-result",
                 hx_swap="innerHTML",
+                hx_on=(
+                    "htmx:afterRequest: "
+                    "if(event.detail.successful) "
+                    "document.getElementById('url').value = ''"
+                ),
             ),
             html.div(id="submit-result", style={"margin-top": "10px"}),
         )