From 524647b1f160a2fdcd72901f93c932c099744dcd Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 25 Jul 2024 11:42:52 +1000
Subject: [PATCH] fix(ui): jumpto interactions

- Autofocus on popover open
- Autoselect number on popover open
- Enter works to change page when input is focused
- Esc works to close popover when input is focused
---
 .../gallery/components/ImageGrid/JumpTo.tsx   | 40 ++++++++++++++-----
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/JumpTo.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/JumpTo.tsx
index 9f268cddb6..72f4bba4e8 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/JumpTo.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/JumpTo.tsx
@@ -11,7 +11,7 @@ import {
   useDisclosure,
 } from '@invoke-ai/ui-library';
 import { useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
@@ -20,6 +20,16 @@ export const JumpTo = () => {
   const { goToPage, currentPage, pages } = useGalleryPagination();
   const [newPage, setNewPage] = useState(currentPage);
   const { isOpen, onToggle, onClose } = useDisclosure();
+  const ref = useRef<HTMLInputElement>(null);
+
+  const onOpen = useCallback(() => {
+    setNewPage(currentPage);
+    setTimeout(() => {
+      const input = ref.current?.querySelector('input');
+      input?.focus();
+      input?.select();
+    }, 0);
+  }, [currentPage]);
 
   const onChangeJumpTo = useCallback((v: number) => {
     setNewPage(v - 1);
@@ -33,30 +43,40 @@ export const JumpTo = () => {
   useHotkeys(
     'enter',
     () => {
-      if (isOpen) {
-        onClickGo();
-      }
+      onClickGo();
     },
+    { enabled: isOpen, enableOnFormTags: ['input'] },
     [isOpen, onClickGo]
   );
 
+  useHotkeys(
+    'esc',
+    () => {
+      setNewPage(currentPage);
+      onClose();
+    },
+    { enabled: isOpen, enableOnFormTags: ['input'] },
+    [isOpen, onClose]
+  );
+
   useEffect(() => {
     setNewPage(currentPage);
   }, [currentPage]);
 
   return (
-    <Popover isOpen={isOpen} onClose={onClose}>
+    <Popover isOpen={isOpen} onClose={onClose} onOpen={onOpen}>
       <PopoverTrigger>
-        <Button aria-label={t('gallery.jump')} size="xs" onClick={onToggle}>
+        <Button aria-label={t('gallery.jump')} size="sm" onClick={onToggle} variant="outline">
           {t('gallery.jump')}
         </Button>
       </PopoverTrigger>
       <PopoverContent>
         <PopoverArrow />
         <PopoverBody>
-          <Flex gap={2}>
+          <Flex gap={2} alignItems="center">
             <FormControl>
               <CompositeNumberInput
+                ref={ref}
                 size="sm"
                 maxW="60px"
                 value={newPage + 1}
@@ -65,10 +85,10 @@ export const JumpTo = () => {
                 step={1}
                 onChange={onChangeJumpTo}
               />
-              <Button size="sm" onClick={onClickGo}>
-                {t('gallery.go')}
-              </Button>
             </FormControl>
+            <Button h="full" size="sm" onClick={onClickGo}>
+              {t('gallery.go')}
+            </Button>
           </Flex>
         </PopoverBody>
       </PopoverContent>