KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Autofocus input when after clicking OpenAI API Key in sidebar. (#324) 

* Update Key.tsx

Autofocus input after its visible.

* Update Key.tsx
This commit is contained in:
Brijesh Bittu 2023-03-31 14:52:56 +05:30 committed by GitHub
parent c1b7b0e070
commit 863d8d8121
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/Settings/Key.tsx
View File

@ -1,6 +1,6 @@
import { IconCheck, IconKey, IconX } from '@tabler/icons-react'; import { IconCheck, IconKey, IconX } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { FC, KeyboardEvent, useState } from 'react'; import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
import { SidebarButton } from '../Sidebar/SidebarButton'; import { SidebarButton } from '../Sidebar/SidebarButton';
interface Props { interface Props {
@ -12,6 +12,7 @@ export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
const { t } = useTranslation('sidebar'); const { t } = useTranslation('sidebar');
const [isChanging, setIsChanging] = useState(false); const [isChanging, setIsChanging] = useState(false);
const [newKey, setNewKey] = useState(apiKey); const [newKey, setNewKey] = useState(apiKey);
const inputRef = useRef<HTMLInputElement>(null);
const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => { const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
@ -25,11 +26,18 @@ export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
setIsChanging(false); setIsChanging(false);
}; };
useEffect(() => {
if (isChanging) {
inputRef.current?.focus();
}
}, [isChanging]);
return isChanging ? ( return isChanging ? (
<div className="duration:200 flex w-full cursor-pointer items-center rounded-md py-3 px-3 transition-colors hover:bg-gray-500/10"> <div className="duration:200 flex w-full cursor-pointer items-center rounded-md py-3 px-3 transition-colors hover:bg-gray-500/10">
<IconKey size={18} /> <IconKey size={18} />
<input <input
ref={inputRef}
className="ml-2 h-[20px] flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-[12.5px] leading-3 text-left text-white outline-none focus:border-neutral-100" className="ml-2 h-[20px] flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-[12.5px] leading-3 text-left text-white outline-none focus:border-neutral-100"
type="password" type="password"
value={newKey} value={newKey}