fix: Prevenir desplazamiento de pagina al presionar Enter en terminal
This commit is contained in:
@@ -12,12 +12,15 @@ export function SeccionSistema() {
|
|||||||
const [isExecuting, setIsExecuting] = useState(false);
|
const [isExecuting, setIsExecuting] = useState(false);
|
||||||
const historyCounter = useRef(0);
|
const historyCounter = useRef(0);
|
||||||
const consoleEndRef = useRef<HTMLDivElement>(null);
|
const consoleEndRef = useRef<HTMLDivElement>(null);
|
||||||
|
const terminalContainerRef = useRef<HTMLDivElement>(null);
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
const commandHistoryRef = useRef<string[]>([]);
|
const commandHistoryRef = useRef<string[]>([]);
|
||||||
const historyIndexRef = useRef<number>(-1);
|
const historyIndexRef = useRef<number>(-1);
|
||||||
|
|
||||||
const scrollToBottom = () => {
|
const scrollToBottom = () => {
|
||||||
consoleEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
if (terminalContainerRef.current) {
|
||||||
|
terminalContainerRef.current.scrollTop = terminalContainerRef.current.scrollHeight;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -69,6 +72,7 @@ export function SeccionSistema() {
|
|||||||
|
|
||||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
handleExecuteMongosh();
|
handleExecuteMongosh();
|
||||||
} else if (e.key === 'ArrowUp') {
|
} else if (e.key === 'ArrowUp') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -168,6 +172,7 @@ export function SeccionSistema() {
|
|||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div
|
<div
|
||||||
|
ref={terminalContainerRef}
|
||||||
className="bg-gray-900 text-green-400 font-mono text-sm p-4 rounded-md h-[400px] overflow-y-auto flex flex-col gap-1 relative cursor-text group"
|
className="bg-gray-900 text-green-400 font-mono text-sm p-4 rounded-md h-[400px] overflow-y-auto flex flex-col gap-1 relative cursor-text group"
|
||||||
onClick={() => inputRef.current?.focus({ preventScroll: true })}
|
onClick={() => inputRef.current?.focus({ preventScroll: true })}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user