From 335410281415deb5e4043375ec6e259b50085a3e Mon Sep 17 00:00:00 2001
From: MytsV <mytsvictoria@gmail.com>
Date: Wed, 9 Oct 2024 18:32:23 +0300
Subject: [PATCH] Allow switching between name and scope inputs via keyboard
 arrows

---
 .../features/search/DIDSearchPanel.tsx             | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/component-library/features/search/DIDSearchPanel.tsx b/src/component-library/features/search/DIDSearchPanel.tsx
index 50020686..0ea12eca 100644
--- a/src/component-library/features/search/DIDSearchPanel.tsx
+++ b/src/component-library/features/search/DIDSearchPanel.tsx
@@ -96,6 +96,18 @@ export const DIDSearchPanel = (props: SearchPanelProps) => {
         props.stopStreaming();
     };
 
+    const onScopeArrowDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'ArrowRight') {
+            nameInputRef.current?.focus();
+        }
+    };
+
+    const onNameArrowDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'ArrowLeft') {
+            scopeInputRef.current?.focus();
+        }
+    };
+
     return (
         <div className="flex flex-col space-y-2 w-full md:items-start md:flex-row md:space-y-0 md:space-x-2">
             <div className="flex flex-col grow sm:flex-row space-y-2 sm:space-x-2 sm:space-y-0">
@@ -121,6 +133,7 @@ export const DIDSearchPanel = (props: SearchPanelProps) => {
                             setScope(event.target.value);
                         }}
                         onEnterKey={onSearch}
+                        onKeyDown={onScopeArrowDown}
                     />
                     <span className="text-neutral-900 dark:text-neutral-100 font-bold">:</span>
                     <Input
@@ -131,6 +144,7 @@ export const DIDSearchPanel = (props: SearchPanelProps) => {
                             setName(event.target.value);
                         }}
                         onEnterKey={onSearch}
+                        onKeyDown={onNameArrowDown}
                     />
                 </div>
             </div>