From 96597c08bec5ce89deb47d93a3dce3fc86fd5f38 Mon Sep 17 00:00:00 2001
From: Carlos Vializ <cvializ@users.noreply.github.com>
Date: Thu, 2 Nov 2017 14:17:08 -0700
Subject: [PATCH] Fix inputs with the autofocus attribute (#11908)

* Fix inputs with the autofocus attribute

* Use whenNextVisible instead
---
 extensions/amp-form/0.1/amp-form.js           | 15 ++++++++++++-
 extensions/amp-form/0.1/test/test-amp-form.js | 22 +++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/extensions/amp-form/0.1/amp-form.js b/extensions/amp-form/0.1/amp-form.js
index 1b9013cea692f..ff9520bbc2f30 100644
--- a/extensions/amp-form/0.1/amp-form.js
+++ b/extensions/amp-form/0.1/amp-form.js
@@ -19,7 +19,10 @@ import {FormEvents} from './form-events';
 import {installFormProxy} from './form-proxy';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
 import {createCustomEvent} from '../../../src/event-helper';
-import {iterateCursor} from '../../../src/dom';
+import {
+  iterateCursor,
+  tryFocus,
+} from '../../../src/dom';
 import {
   formOrNullForElement,
   setFormForElement,
@@ -139,6 +142,9 @@ export class AmpForm {
     /** @const @private {!../../../src/service/resources-impl.Resources} */
     this.resources_ = Services.resourcesForDoc(this.form_);
 
+    /** @const @private */
+    this.viewer_ = Services.viewerForDoc(this.form_);
+
     /** @const @private {string} */
     this.method_ = (this.form_.getAttribute('method') || 'GET').toUpperCase();
 
@@ -251,6 +257,13 @@ export class AmpForm {
 
   /** @private */
   installEventHandlers_() {
+    this.viewer_.whenNextVisible().then(() => {
+      const autofocus = this.form_.querySelector('[autofocus]');
+      if (autofocus) {
+        tryFocus(autofocus);
+      }
+    });
+
     this.form_.addEventListener(
         'submit', this.handleSubmitEvent_.bind(this), true);
 
diff --git a/extensions/amp-form/0.1/test/test-amp-form.js b/extensions/amp-form/0.1/test/test-amp-form.js
index 180419f3880ce..f605a11ba9f68 100644
--- a/extensions/amp-form/0.1/test/test-amp-form.js
+++ b/extensions/amp-form/0.1/test/test-amp-form.js
@@ -161,6 +161,28 @@ describes.repeated('', {
       document.body.removeChild(form);
     });
 
+    it('should autofocus elements with the autofocus attribute', () => {
+      const form = getForm();
+      document.body.appendChild(form);
+      form.addEventListener = sandbox.spy();
+      form.setAttribute('action-xhr', 'https://example.com');
+      const button1 = form.querySelector('input');
+      button1.setAttribute('autofocus', '');
+      new AmpForm(form);
+
+      const viewer = Services.viewerForDoc(form.ownerDocument);
+      let resolve_ = null;
+      sandbox.stub(viewer, 'whenNextVisible').returns(new Promise(resolve => {
+        resolve_ = resolve;
+      }));
+
+      expect(document.activeElement).to.not.equal(button1);
+      resolve_();
+      return viewer.whenNextVisible().then(() => {
+        expect(document.activeElement).to.equal(button1);
+      });
+    });
+
     it('should install proxy', () => {
       const form = getForm();
       document.body.appendChild(form);