From 737872c8631d732571d514d83b6f289a1b4248b4 Mon Sep 17 00:00:00 2001
From: Luke Brody <luke@lukebrody.com>
Date: Sat, 2 Nov 2024 09:27:00 -0700
Subject: [PATCH] Similar improvement to #324

---
 react/src/components/statistic-panel.tsx | 25 +++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/react/src/components/statistic-panel.tsx b/react/src/components/statistic-panel.tsx
index 2b62b777c..9ad631f8f 100644
--- a/react/src/components/statistic-panel.tsx
+++ b/react/src/components/statistic-panel.tsx
@@ -330,6 +330,19 @@ function SelectPage(props: {
     }
 
     const curr_universe = useUniverse()
+
+    const handleSubmit = (e: React.FocusEvent | React.KeyboardEvent): void => {
+        let new_page = parseInt((e.target as HTMLInputElement).value)
+        if (new_page < 1) {
+            new_page = 1
+        }
+        if (new_page > props.max_pages) {
+            new_page = props.max_pages
+        }
+        const new_start = (new_page - 1) * props.per_page + 1
+        props.change_start(curr_universe, new_start)
+    }
+
     return (
         <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
             <button onClick={() => { props.change_start(curr_universe, props.prev_page) }} className="serif" style={button_style}>&lt;</button>
@@ -343,17 +356,11 @@ function SelectPage(props: {
                     defaultValue={props.current_page}
                     onKeyDown={(e) => {
                         if (e.key === 'Enter') {
-                            let new_page = parseInt((e.target as HTMLInputElement).value)
-                            if (new_page < 1) {
-                                new_page = 1
-                            }
-                            if (new_page > props.max_pages) {
-                                new_page = props.max_pages
-                            }
-                            const new_start = (new_page - 1) * props.per_page + 1
-                            props.change_start(curr_universe, new_start)
+                            handleSubmit(e)
                         }
                     }}
+                    onFocus={(e) => { e.target.select() }}
+                    onBlur={handleSubmit}
                 />
                 <span>
                     {' of '}