Allow users of web terminal to disable auto focus (#52992)

The terminal used to automatically took focus, which prevented any
modals rendered at the same time as the terminal from maintaining
focus. This adds a new `disableAutoFocus` prop to allow callers
to take manual control of when the terminal should be focused.

Fixes #52908.

Author: rosstimothy

web/packages/teleport/src/Console/DocumentKubeExec/DocumentKubeExec.test.tsx

@@ -98,6 +98,7 @@ describe('DocumentKubeExec', () => {
     setup('waiting-for-exec-data');
 
     expect(screen.getByText('Exec into a pod')).toBeInTheDocument();
+    expect(screen.getByLabelText('Namespace')).toHaveFocus();
   });
 
   test('does not render data dialog when status is initialized', () => {

web/packages/teleport/src/Console/DocumentKubeExec/DocumentKubeExec.tsx

@@ -40,9 +40,13 @@ export default function DocumentKubeExec({ doc, visible }: Props) {
     useKubeExecSession(doc);
   const mfa = useMfaEmitter(tty);
   useEffect(() => {
-    // when switching tabs or closing tabs, focus on visible terminal
-    terminalRef.current?.focus();
-  }, [visible, mfa.challenge]);
+    // when switching tabs, closing tabs, or
+    // when the pod information modal is dismissed
+    // focus the terminal
+    if (status === 'initialized') {
+      terminalRef.current?.focus();
+    }
+  }, [visible, mfa.challenge, status]);
   const theme = useTheme();
 
   const terminal = (
@@ -52,6 +56,7 @@ export default function DocumentKubeExec({ doc, visible }: Props) {
       fontFamily={theme.fonts.mono}
       theme={theme.colors.terminal}
       convertEol
+      disableAutoFocus={true}
     />
   );
 

web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx

@@ -44,6 +44,7 @@ export interface TerminalProps {
   // terminalAddons is used to pass the tty to the parent component to enable any optional components like search or filetransfers.
   terminalAddons?: (terminalRef: XTermCtrl) => React.JSX.Element;
   disableCtrlC?: boolean;
+  disableAutoFocus?: boolean;
 }
 
 export const Terminal = forwardRef<TerminalRef, TerminalProps>((props, ref) => {
@@ -98,6 +99,12 @@ export const Terminal = forwardRef<TerminalRef, TerminalProps>((props, ref) => {
     termCtrlRef.current?.updateTheme(props.theme);
   }, [props.theme]);
 
+  useEffect(() => {
+    if (!props.disableAutoFocus) {
+      termCtrlRef.current?.focus();
+    }
+  }, []);
+
   return (
     <Flex
       flexDirection="column"

web/packages/teleport/src/lib/term/terminal.ts

@@ -130,7 +130,6 @@ export default class TtyTerminal implements TerminalSearcher {
 
     this.term.open(this._el);
     this._fitAddon.fit();
-    this.focus();
     this.term.onData(data => {
       this.tty.send(data);
     });