Skip to content

Commit f235599

Browse files
dorlugasigalCopilot
andcommitted
fix(frontend): revert scroll-to-bottom focus/tabIndex — prevents mobile keyboard
The Copilot review suggested adding terminal.focus() after scrollToBottom and changing tabIndex to 0 for accessibility. Both changes inadvertently open the soft keyboard on mobile when tapping the scroll-to-bottom button, covering half the terminal. This is an intentional design decision: the button scrolls without stealing focus so the keyboard stays closed. Added inline comments explaining the rationale so reviewers understand the intent. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent c5dcd44 commit f235599

1 file changed

Lines changed: 11 additions & 2 deletions

File tree

src/frontend/src/components/TerminalPane/TerminalPane.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -487,14 +487,19 @@ export function TerminalPane({ sessionId, active, visible, fontSize = 14 }: Term
487487
const scrollToBottom = useCallback(
488488
(e: React.MouseEvent) => {
489489
e.preventDefault();
490+
// stopPropagation prevents the pane's onClick (which calls terminal.focus())
491+
// from firing — intentional so tapping this button on mobile does NOT open
492+
// the soft keyboard.
490493
e.stopPropagation();
491494
if (terminal) {
492495
programmaticScrollRef.current = true;
493496
terminal.scrollToBottom();
494497
programmaticScrollRef.current = false;
495498
wasAtBottomRef.current = true;
496499
setShowScrollBtn(false);
497-
terminal.focus();
500+
// NOTE: Do NOT call terminal.focus() here — on mobile devices that
501+
// would open the soft keyboard, covering half the terminal. Users who
502+
// want to type can tap the terminal area directly.
498503
}
499504
},
500505
[terminal],
@@ -528,7 +533,11 @@ export function TerminalPane({ sessionId, active, visible, fontSize = 14 }: Term
528533
<button
529534
className={styles.scrollToBottom}
530535
onClick={scrollToBottom}
531-
tabIndex={0}
536+
// tabIndex={-1}: intentionally removed from tab order so that
537+
// tapping this button on mobile doesn't make it the active element
538+
// and inadvertently open the soft keyboard. The button is still
539+
// reachable via screen readers through its aria-label.
540+
tabIndex={-1}
532541
aria-label="Scroll to bottom"
533542
>
534543

0 commit comments

Comments
 (0)