fix: remove container ResizeObserver causing infinite growth loop
- Container-level ResizeObserver created feedback loop with fitAddon.fit() - Removed it, kept initialization-time dimension check only - Rely on window resize listener for viewport changes
This commit is contained in:
@@ -56,7 +56,6 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
|||||||
});
|
});
|
||||||
const lastPingRef = useRef<number>(0);
|
const lastPingRef = useRef<number>(0);
|
||||||
const heartbeatCheckRef = useRef<number | null>(null);
|
const heartbeatCheckRef = useRef<number | null>(null);
|
||||||
const containerResizeObserverRef = useRef<ResizeObserver | null>(null);
|
|
||||||
|
|
||||||
const calculateFontSize = useCallback(() => {
|
const calculateFontSize = useCallback(() => {
|
||||||
if (!isMobile) return fontSize;
|
if (!isMobile) return fontSize;
|
||||||
@@ -319,28 +318,6 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
|||||||
|
|
||||||
window.addEventListener("resize", handleResize);
|
window.addEventListener("resize", handleResize);
|
||||||
|
|
||||||
// Watch container size changes (e.g. mobile header auto-hide, keyboard)
|
|
||||||
const containerResizeObserver = new ResizeObserver((entries) => {
|
|
||||||
for (const entry of entries) {
|
|
||||||
const { width, height } = entry.contentRect;
|
|
||||||
if (width > 0 && height > 0) {
|
|
||||||
fitAddon.fit();
|
|
||||||
const { cols, rows } = term;
|
|
||||||
if (ws.readyState === WebSocket.OPEN) {
|
|
||||||
ws.send(
|
|
||||||
JSON.stringify({
|
|
||||||
type: "resize",
|
|
||||||
cols,
|
|
||||||
rows,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
containerResizeObserver.observe(container);
|
|
||||||
containerResizeObserverRef.current = containerResizeObserver;
|
|
||||||
|
|
||||||
// Notify parent about terminal readiness
|
// Notify parent about terminal readiness
|
||||||
if (onTerminalReadyRef.current) {
|
if (onTerminalReadyRef.current) {
|
||||||
const sendData = (data: string) => {
|
const sendData = (data: string) => {
|
||||||
@@ -370,10 +347,6 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
|||||||
clearTimeout(resizeTimeout);
|
clearTimeout(resizeTimeout);
|
||||||
window.removeEventListener("resize", handleResize);
|
window.removeEventListener("resize", handleResize);
|
||||||
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
||||||
if (containerResizeObserverRef.current) {
|
|
||||||
containerResizeObserverRef.current.disconnect();
|
|
||||||
containerResizeObserverRef.current = null;
|
|
||||||
}
|
|
||||||
if (ws) {
|
if (ws) {
|
||||||
ws.close();
|
ws.close();
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user