[Nearby] Focus the device name field on the onboarding page.

This sets initial focus to the device name input on the onboarding page.
Focus is set manually because the page is initially hidden when the
dialog loads, preventing the 'autofocus' attribute from working.

Fixed: 1148529
Change-Id: I57a0a7a092591c0b29fe64be60adfdd635e0e141
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2541644
Commit-Queue: Michael Hansen <hansenmichael@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#828079}

chrome/browser/resources/nearby_share/shared/nearby_onboarding_page.html

@@ -59,7 +59,7 @@
           <cr-input label="$i18n{nearbyShareOnboardingPageDeviceName}"
               id="deviceName" value="[[settings.deviceName]]"
               on-input="onDeviceNameInput_" error-message="[[errorMessage]]"
-              invalid="[[hasErrorMessage_(errorMessage)]]" autofocus>
+              invalid="[[hasErrorMessage_(errorMessage)]]">
           </cr-input>
         </div>
       </div>

chrome/browser/resources/nearby_share/shared/nearby_onboarding_page.js

@@ -29,6 +29,20 @@ Polymer({
     'next': 'onNext_',
   },
 
+  /** @override */
+  attached() {
+    // Manually focus the device name field. Typically we would use the
+    // autofocus attribute, but because the view is initially hidden via CSS the
+    // input is not present on page load. We instead set focus in an async
+    // function.
+    const deviceName = this.$$('#deviceName');
+    if (deviceName) {
+      setTimeout(function() {
+        deviceName.focus();
+      }, 0);
+    }
+  },
+
   /**
    * @private
    */

chrome/test/data/webui/nearby_share/shared/nearby_onboarding_page_test.js

@@ -46,6 +46,12 @@ suite('nearby-onboarding-page', function() {
     assertEquals(deviceName, element.$$('#deviceName').value);
   });
 
+  test('Device name is focused', async () => {
+    const input = /** @type {!CrInputElement} */ (element.$$('#deviceName'));
+    await test_util.waitAfterNextRender(/** @type {!HTMLElement} */ (input));
+    assertEquals(input, element.shadowRoot.activeElement);
+  });
+
   test('validate device name preference', async () => {
     loadTimeData.overrideValues({
       'nearbyShareDeviceNameEmptyError': 'non-empty',