Fix: [Chat with BOT] After Opening Chat with Bot screen, focus indicator does not land on Live Chat Tab control

packages/app/client/src/ui/editor/emulator/emulator.tsx

@@ -92,8 +92,6 @@ export interface EmulatorProps {
 }
 
 export class Emulator extends React.Component<EmulatorProps, Record<string, unknown>> {
-  private restartButtonRef: HTMLButtonElement;
-
   private readonly onVerticalSizeChange = debounce((sizes: SplitterSize[]) => {
     this.props.ui = {
       ...this.props.ui,
@@ -108,12 +106,6 @@ export class Emulator extends React.Component<EmulatorProps, Record<string, unkn
     };
   }, 500);
 
-  componentDidMount() {
-    if (this.restartButtonRef) {
-      this.restartButtonRef.focus();
-    }
-  }
-
   componentWillMount() {
     window.addEventListener('keydown', this.keyboardEventListener);
   }
@@ -159,7 +151,6 @@ export class Emulator extends React.Component<EmulatorProps, Record<string, unkn
             options={[NewUserId, SameUserId]}
             onClick={this.onRestartOptionSelected}
             onDefaultButtonClick={this.onStartOverClick}
-            buttonRef={this.setRestartButtonRef}
             submenuLabel={isMac() ? 'Restart conversation sub menu' : ''}
           />
           <button
@@ -309,10 +300,6 @@ export class Emulator extends React.Component<EmulatorProps, Record<string, unkn
     this.props.restartConversation(documentId, true, false);
   };
 
-  private setRestartButtonRef = (ref: HTMLButtonElement): void => {
-    this.restartButtonRef = ref;
-  };
-
   private readonly keyboardEventListener: EventListener = (event: KeyboardEvent): void => {
     if (this.props.activeDocumentId === this.props.documentId) {
       // Meta corresponds to 'Command' on Mac

packages/app/client/src/ui/shell/mdi/tab/tab.tsx

@@ -57,6 +57,7 @@ export interface TabState {
 }
 
 export class Tab extends React.Component<TabProps, TabState> {
+  private tabRef: HTMLButtonElement;
   constructor(props: TabProps) {
     super(props);
 
@@ -66,6 +67,12 @@ export class Tab extends React.Component<TabProps, TabState> {
     };
   }
 
+  componentDidMount() {
+    if (this.tabRef) {
+      this.tabRef.focus();
+    }
+  }
+
   public render() {
     const { active, label } = this.props;
     const activeClassName = active ? styles.activeEditorTab : '';
@@ -89,7 +96,14 @@ export class Tab extends React.Component<TabProps, TabState> {
         <TruncateText className={styles.truncatedTabText}>{label}</TruncateText>
         {this.props.dirty ? <span role="presentation">*</span> : null}
         <div className={styles.tabSeparator} role="presentation" />
-        <div className={styles.tabFocusTarget} role="tab" tabIndex={0} aria-label={`${label}`} aria-selected={active}>
+        <div
+          className={styles.tabFocusTarget}
+          role="tab"
+          tabIndex={0}
+          aria-label={`${label}`}
+          aria-selected={active}
+          ref={this.setTabRef}
+        >
           &nbsp;
         </div>
         <button
@@ -171,4 +185,8 @@ export class Tab extends React.Component<TabProps, TabState> {
         return styles.livechat;
     }
   }
+
+  private setTabRef = (ref: HTMLButtonElement): void => {
+    this.tabRef = ref;
+  };
 }

packages/sdk/ui-react/src/widget/splitButton/splitButton.tsx

@@ -67,7 +67,7 @@ export class SplitButton extends React.Component<SplitButtonProps, SplitButtonSt
   }
 
   componentDidMount() {
-    this.onClickOption(0);
+    this.onClickOption(0, false);
   }
 
   public render(): JSX.Element {
@@ -158,18 +158,20 @@ export class SplitButton extends React.Component<SplitButtonProps, SplitButtonSt
     }
   };
 
-  private onClickOption = (index: number): void => {
+  private onClickOption = (index: number, focus: boolean = true): void => {
     const { onClick, options = [] } = this.props;
     if (onClick && options.length > 0) {
       const newValue = options[index] || null;
       this.setState({ selected: index });
       onClick(newValue);
     }
-    this.hidePanel();
+    this.hidePanel(focus);
   };
 
-  private hidePanel = (): void => {
-    this.caretRef.focus();
+  private hidePanel = (focus: boolean = true): void => {
+    if (focus) {
+      this.caretRef.focus();
+    }
     this.setState({ expanded: false });
   };