autofocus text area on new chat fixes #91

jackschedel · Jan 6, 2024 · a8504ca · a8504ca
1 parent 3852fe2
commit a8504ca
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -98,6 +98,7 @@ function App() {
     if (e.ctrlKey && e.key === 'n') {
       e.preventDefault();
       addChat();
+      sharedTextareaRef?.current?.focus();
     }
 
     // ctrl+o - Copy code block

diff --git a/src/components/Menu/NewChat.tsx b/src/components/Menu/NewChat.tsx
@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import useStore from '@store/store';
 
 import PlusIcon from '@icon/PlusIcon';
 
 import useAddChat from '@hooks/useAddChat';
+import GlobalContext from '@hooks/GlobalContext';
 
 const NewChat = ({ folder }: { folder?: string }) => {
   const { t } = useTranslation();
   const addChat = useAddChat();
+  const { ref } = useContext(GlobalContext);
   const generating = useStore((state) => state.generating);
 
   return (
@@ -23,7 +25,10 @@ const NewChat = ({ folder }: { folder?: string }) => {
           : 'text-custom-white gap-2 mb-2 border border-custom-white/20'
       }`}
       onClick={() => {
-        if (!generating) addChat(folder);
+        if (!generating) {
+          addChat(folder);
+          ref?.current?.focus();
+        }
       }}
       title={String(t('newChat'))}
     >

diff --git a/src/components/MobileBar/MobileBar.tsx b/src/components/MobileBar/MobileBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import useGStore from '@store/cloud-auth-store';
 import useStore from '@store/store';
 import PlusIcon from '@icon/PlusIcon';
@@ -12,6 +12,7 @@ import ForwardIcon from '@icon/ForwardIcon';
 
 import useGoBack from '@hooks/useGoBack';
 import useGoForward from '@hooks/useGoForward';
+import GlobalContext from '@hooks/GlobalContext';
 
 const googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID || undefined;
 
@@ -21,7 +22,7 @@ const MobileBar = () => {
   const hideSideMenu = useStore((state) => state.hideSideMenu);
   const currentChatIndex = useStore((state) => state.currentChatIndex);
   const chats = useStore((state) => state.chats);
-
+  const { ref } = useContext(GlobalContext);
   const cloudSync = useGStore((state) => state.cloudSync);
   const syncStatus = useGStore((state) => state.syncStatus);
 
@@ -88,6 +89,7 @@ const MobileBar = () => {
         onClick={() => {
           if (!generating) {
             addChat(chats?.[currentChatIndex]?.folder);
+            ref?.current?.focus();
           }
         }}
       >