fix: the focus in the sketchbook widget

Ref: arduino/arduino-ide#1720

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>

arduino-ide-extension/src/browser/library/library-list-widget.ts

@@ -20,6 +20,7 @@ import { Installable } from '../../common/protocol';
 import { ListItemRenderer } from '../widgets/component-list/list-item-renderer';
 import { nls } from '@theia/core/lib/common';
 import { LibraryFilterRenderer } from '../widgets/component-list/filter-renderer';
+import { findChildTheiaButton } from '../utils/dom';
 
 @injectable()
 export class LibraryListWidget extends ListWidget<
@@ -243,17 +244,7 @@ class MessageBoxDialog extends AbstractDialog<MessageBoxDialog.Result> {
 
   protected override onAfterAttach(message: Message): void {
     super.onAfterAttach(message);
-    let buttonToFocus: HTMLButtonElement | undefined = undefined;
+    findChildTheiaButton(this.controlPanel)?.focus();
-    for (const child of Array.from(this.controlPanel.children)) {
-      if (child instanceof HTMLButtonElement) {
-        if (child.classList.contains('main')) {
-          buttonToFocus = child;
-          break;
-        }
-        buttonToFocus = child;
-      }
-    }
-    buttonToFocus?.focus();
   }
 }
 export namespace MessageBoxDialog {

arduino-ide-extension/src/browser/utils/dom.ts

@@ -0,0 +1,37 @@
+import { notEmpty } from '@theia/core';
+
+/**
+ * Finds the closest child HTMLButtonElement representing a Theia button.
+ * A button is a Theia button if it's a `<button>` element and has the `"theia-button"` class.
+ * If an element has multiple Theia button children, this function prefers `"main"` over `"secondary"` button.
+ */
+export function findChildTheiaButton(
+  element: HTMLElement,
+  recursive = false
+): HTMLButtonElement | undefined {
+  let button: HTMLButtonElement | undefined = undefined;
+  const children = Array.from(element.children);
+  for (const child of children) {
+    if (
+      child instanceof HTMLButtonElement &&
+      child.classList.contains('theia-button')
+    ) {
+      if (child.classList.contains('main')) {
+        return child;
+      }
+      button = child;
+    }
+  }
+  if (!button && recursive) {
+    button = children
+      .filter(isHTMLElement)
+      .map((childElement) => findChildTheiaButton(childElement, true))
+      .filter(notEmpty)
+      .shift();
+  }
+  return button;
+}
+
+function isHTMLElement(element: Element): element is HTMLElement {
+  return element instanceof HTMLElement;
+}

arduino-ide-extension/src/browser/widgets/sketchbook/sketchbook-composite-widget.tsx

@@ -9,6 +9,7 @@ import { BaseWidget } from '@theia/core/lib/browser/widgets/widget';
 import { CommandService } from '@theia/core/lib/common/command';
 import { SketchbookTreeWidget } from './sketchbook-tree-widget';
 import { CreateNew } from '../sketchbook/create-new';
+import { findChildTheiaButton } from '../../utils/dom';
 
 @injectable()
 export abstract class BaseSketchbookCompositeWidget<
@@ -18,16 +19,17 @@ export abstract class BaseSketchbookCompositeWidget<
   protected readonly commandService: CommandService;
 
   private readonly compositeNode: HTMLElement;
+  private readonly footerNode: HTMLElement;
   private readonly footerRoot: Root;
 
   constructor() {
     super();
     this.compositeNode = document.createElement('div');
     this.compositeNode.classList.add('composite-node');
-    const footerNode = document.createElement('div');
+    this.footerNode = document.createElement('div');
-    footerNode.classList.add('footer-node');
+    this.footerNode.classList.add('footer-node');
-    this.compositeNode.appendChild(footerNode);
+    this.compositeNode.appendChild(this.footerNode);
-    this.footerRoot = createRoot(footerNode);
+    this.footerRoot = createRoot(this.footerNode);
     this.node.appendChild(this.compositeNode);
     this.title.closable = false;
   }
@@ -51,6 +53,7 @@ export abstract class BaseSketchbookCompositeWidget<
     super.onActivateRequest(message);
     // Sending a resize message is needed because otherwise the tree widget would render empty
     this.onResize(Widget.ResizeMessage.UnknownSize);
+    findChildTheiaButton(this.footerNode, true)?.focus();
   }
 
   protected override onResize(message: Widget.ResizeMessage): void {

arduino-ide-extension/src/browser/widgets/sketchbook/sketchbook-widget.tsx

@@ -128,13 +128,7 @@ export class SketchbookWidget extends BaseWidget {
 
   protected override onActivateRequest(message: Message): void {
     super.onActivateRequest(message);
-
+    this.sketchbookCompositeWidget.activate();
-    // TODO: focus the active sketchbook
-    // if (this.editor) {
-    //     this.editor.focus();
-    // } else {
-    // }
-    this.node.focus();
   }
 
   protected override onResize(message: Widget.ResizeMessage): void {