Dialog focus (#1472)

* focus on dialog controls when is open

* fix "Configure and Upload" label

* fix focus on user fields

Author: Alberto Iannaccone

arduino-ide-extension/src/browser/boards/boards-service-provider.ts

@@ -600,7 +600,7 @@ export class BoardsServiceProvider
       boardsConfig.selectedBoard &&
       availableBoards.every(({ selected }) => !selected)
     ) {
-      let port = boardsConfig.selectedPort
+      let port = boardsConfig.selectedPort;
       // If the selected board has the same port of an unknown board
       // that is already in availableBoards we might get a duplicate port.
       // So we remove the one already in the array and add the selected one.
@@ -611,7 +611,7 @@ export class BoardsServiceProvider
         // get the "Unknown board port" that we will substitute,
         // then we can include it in the "availableBoard object"
         // pushed below; to ensure addressLabel is included
-        port = availableBoards[found].port
+        port = availableBoards[found].port;
         availableBoards.splice(found, 1);
       }
       availableBoards.push({

arduino-ide-extension/src/browser/contributions/upload-sketch.ts

@@ -229,7 +229,7 @@ export namespace UploadSketch {
       id: 'arduino-upload-with-configuration-sketch',
       label: nls.localize(
         'arduino/sketch/configureAndUpload',
-        'Configure And Upload'
+        'Configure and Upload'
       ),
       category: 'Arduino',
     };

arduino-ide-extension/src/browser/contributions/user-fields.ts

@@ -58,7 +58,7 @@ export class UserFields extends Contribution {
     }
   }
 
-  private selectedFqbnAddress(): string | undefined  {
+  private selectedFqbnAddress(): string | undefined {
     const { boardsConfig } = this.boardsServiceProvider;
     const fqbn = boardsConfig.selectedBoard?.fqbn;
     if (!fqbn) {
@@ -78,7 +78,9 @@ export class UserFields extends Contribution {
   ): Promise<BoardUserField[] | undefined> {
     const cached = this.cachedUserFields.get(key);
     // Deep clone the array of board fields to avoid editing the cached ones
-    this.userFieldsDialog.value = cached ? cached.slice() : await this.boardsServiceProvider.selectedBoardUserFields();
+    this.userFieldsDialog.value = cached
+      ? cached.slice()
+      : await this.boardsServiceProvider.selectedBoardUserFields();
     const result = await this.userFieldsDialog.open();
     if (!result) {
       return;
@@ -140,10 +142,7 @@ export class UserFields extends Contribution {
   }
 
   notifyFailedWithError(e: Error): void {
-    if (
-      this.boardRequiresUserFields &&
-      CoreError.UploadFailed.is(e)
-    ) {
+    if (this.boardRequiresUserFields && CoreError.UploadFailed.is(e)) {
       this.userFieldsSet = false;
     }
   }

arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-dialog.tsx

@@ -171,6 +171,9 @@ export class UploadCertificateDialog extends AbstractDialog<void> {
       Widget.detach(this.widget);
     }
     Widget.attach(this.widget, this.contentNode);
+    const firstButton = this.widget.node.querySelector('button');
+    firstButton?.focus();
+
     this.widget.busyCallback = this.busyCallback.bind(this);
     super.onAfterAttach(msg);
     this.update();

arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-dialog.tsx

@@ -115,6 +115,8 @@ export class UploadFirmwareDialog extends AbstractDialog<void> {
       Widget.detach(this.widget);
     }
     Widget.attach(this.widget, this.contentNode);
+    const firstButton = this.widget.node.querySelector('button');
+    firstButton?.focus();
     this.widget.busyCallback = this.busyCallback.bind(this);
     super.onAfterAttach(msg);
     this.update();

arduino-ide-extension/src/browser/dialogs/user-fields/user-fields-component.tsx

@@ -16,9 +16,9 @@ export const UserFieldsComponent = ({
   const [boardUserFields, setBoardUserFields] = React.useState<
     BoardUserField[]
   >(initialBoardUserFields);
-
   const [uploadButtonDisabled, setUploadButtonDisabled] =
     React.useState<boolean>(true);
+  const firstInputElement = React.useRef<HTMLInputElement>(null);
 
   React.useEffect(() => {
     setBoardUserFields(initialBoardUserFields);
@@ -48,7 +48,10 @@ export const UserFieldsComponent = ({
   React.useEffect(() => {
     updateUserFields(boardUserFields);
     setUploadButtonDisabled(!allFieldsHaveValues(boardUserFields));
-  }, [boardUserFields]);
+    if (firstInputElement.current) {
+      firstInputElement.current.focus();
+    }
+  }, [boardUserFields, updateUserFields]);
 
   return (
     <div>
@@ -71,6 +74,7 @@ export const UserFieldsComponent = ({
                       field.label
                     )}
                     onChange={updateUserField(index)}
+                    ref={index === 0 ? firstInputElement : undefined}
                   />
                 </div>
               </div>

arduino-ide-extension/src/browser/dialogs/user-fields/user-fields-dialog.tsx

@@ -13,7 +13,7 @@ import { BoardUserField } from '../../../common/protocol';
 
 @injectable()
 export class UserFieldsDialogWidget extends ReactWidget {
-  protected _currentUserFields: BoardUserField[] = [];
+  private _currentUserFields: BoardUserField[] = [];
 
   constructor(private cancel: () => void, private accept: () => Promise<void>) {
     super();
@@ -34,7 +34,7 @@ export class UserFieldsDialogWidget extends ReactWidget {
     });
   }
 
-  protected setUserFields(userFields: BoardUserField[]): void {
+  private setUserFields(userFields: BoardUserField[]): void {
     this._currentUserFields = userFields;
   }
 

i18n/en.json

@@ -376,7 +376,7 @@
       "cantOpen": "A folder named \"{0}\" already exists. Can't open sketch.",
       "close": "Are you sure you want to close the sketch?",
       "compile": "Compiling sketch...",
-      "configureAndUpload": "Configure And Upload",
+      "configureAndUpload": "Configure and Upload",
       "createdArchive": "Created archive '{0}'.",
       "doneCompiling": "Done compiling.",
       "doneUploading": "Done uploading.",