diff --git a/AppImage/components/terminal-panel.tsx b/AppImage/components/terminal-panel.tsx index 281b7bf4..fd12fe33 100644 --- a/AppImage/components/terminal-panel.tsx +++ b/AppImage/components/terminal-panel.tsx @@ -431,27 +431,18 @@ export const TerminalPanel: React.FC = ({ websocketUrl, onCl } useEffect(() => { - // Initialize terminals when container refs are available - const initPending = () => { + // Small delay to ensure DOM refs are available after state update + // This fixes the issue where first terminal doesn't connect on mobile/VPN + const timer = setTimeout(() => { terminals.forEach((terminal) => { const container = containerRefs.current[terminal.id] if (!terminal.term && container) { initializeTerminal(terminal, container) } }) - } + }, 50) - // Run immediately - initPending() - - // Retry after delays to handle slow DOM rendering (mobile/VPN) - const timer1 = setTimeout(initPending, 100) - const timer2 = setTimeout(initPending, 300) - - return () => { - clearTimeout(timer1) - clearTimeout(timer2) - } + return () => clearTimeout(timer) }, [terminals, isMobile]) useEffect(() => { @@ -656,7 +647,13 @@ export const TerminalPanel: React.FC = ({ websocketUrl, onCl } } - const handleKeyButton = (key: string) => { + const handleKeyButton = (key: string, e?: React.MouseEvent | React.TouchEvent) => { + // Prevenir comportamientos por defecto del navegador + if (e) { + e.preventDefault() + e.stopPropagation() + } + const activeTerminal = terminals.find((t) => t.id === activeTerminalId) if (!activeTerminal || !activeTerminal.ws || activeTerminal.ws.readyState !== WebSocket.OPEN) return @@ -924,7 +921,11 @@ const handleClose = () => { {(isMobile || isTablet) && (