ampproject · alanorozco · Feb 6, 2019 · Feb 5, 2019 · Feb 5, 2019 · Feb 5, 2019
diff --git a/spec/amp-actions-and-events.md b/spec/amp-actions-and-events.md
@@ -312,11 +312,15 @@ event.response</pre></td>
   </tr>
   <tr>
     <td><code>show</code></td>
-    <td>Shows the target element.</td>
+    <td>Shows the target element. If an
+    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autofocus"><code>autofocus</code> element</a> becomes visible as a
+    result, it gains focus.</td>
   </tr>
   <tr>
     <td><code>toggleVisibility</code></td>
-    <td>Toggles the visibility of the target element.</td>
+    <td>Toggles the visibility of the target element. If an
+    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autofocus"><code>autofocus</code> element</a> becomes visible as a
+    result, it gains focus.</td>
   </tr>
   <tr>
     <td><code>toggleClass(class=STRING, force=BOOLEAN)</code></td>

diff --git a/src/service/standard-actions-impl.js b/src/service/standard-actions-impl.js
@@ -34,6 +34,18 @@ function isShowable(element) {
   return element.hasAttribute('hidden');
 }
 
+/**
+ * @param {!Element} element
+ * @return {?Element}
+ * @visibleForTesting
+ */
+export function getAutofocusElementForShowAction(element) {
+  if (element.hasAttribute('autofocus')) {
+    return element;
+  }
+  return element.querySelector('[autofocus]');
+}
+
 /** @const {string} */
 const TAG = 'STANDARD-ACTIONS';
 
@@ -287,8 +299,8 @@ export class StandardActions {
    * @param {!./action-impl.ActionInvocation} invocation
    * @return {?Promise}
    */
-  handleShow(invocation) {
-    const target = dev().assertElement(invocation.node);
+  handleShow({node}) {
+    const target = dev().assertElement(node);
     const ownerWindow = toWin(target.ownerDocument.defaultView);
 
     if (target.classList.contains(getLayoutClass(Layout.NODISPLAY))) {
@@ -311,17 +323,36 @@ export class StandardActions {
       }
     });
 
-    this.resources_.mutateElement(target, () => {
-      if (target.classList.contains('i-amphtml-element')) {
-        target./*OK*/expand();
-      } else {
-        toggle(target, true);
-      }
-    });
+    const autofocusElOrNull = getAutofocusElementForShowAction(target);
+
+    // iOS only honors focus in sync operations.
+    if (autofocusElOrNull && Services.platformFor(ownerWindow).isIos()) {
+      this.handleShowSync_(target, autofocusElOrNull);
+    } else {
+      this.resources_.mutateElement(target, () => {
+        this.handleShowSync_(target, autofocusElOrNull);
+      });
+    }
 
     return null;
   }
 
+  /**
+   * @param {!Element} target
+   * @param {?Element} autofocusElOrNull
+   * @private
+   */
+  handleShowSync_(target, autofocusElOrNull) {
+    if (target.classList.contains('i-amphtml-element')) {
+      target./*OK*/expand();
+    } else {
+      toggle(target, true);
+    }
+    if (autofocusElOrNull) {
+      tryFocus(autofocusElOrNull);
+    }
+  }
+
   /**
    * Handles "toggle" action.
    * @param {!./action-impl.ActionInvocation} invocation

diff --git a/test/manual/autofocus-on-show.html b/test/manual/autofocus-on-show.html
@@ -0,0 +1,93 @@
+<!--
+  Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS-IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the license.
+-->
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Autofocus on show</title>
+  <link rel="canonical" href="https://ampproject.org/">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <style amp-boilerplate>
+  body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
+  <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
+  <style amp-custom>
+    body, button, input {
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      font-size: 16px;
+      line-height: 20px;
+    }
+    body {
+      padding: 40px;
+    }
+    input, button {
+      padding: 12px 16px;
+    }
+    input {
+      flex: 1;
+      background: white;
+      margin-right: 12px;
+      border: 1px solid #ccc;
+    }
+    input:focus {
+      border-color: #005af0;
+      outline: 1px solid #005af0;
+    }
+    input + span {
+      opacity: 0;
+      text-transform: uppercase;
+      font-size: 12px;
+    }
+    input:focus + span {
+      opacity: 1;
+      color: #005af0;
+      font-weight: bold;
+    }
+    button {
+      border: none;
+      background: #005af0;
+      color: white;
+      font-weight: bold;
+      border-radius: 4px;
+      margin: 0 12px 0 0;
+    }
+    #wrapper {
+      display: flex;
+      align-items: center;
+      padding: 20px 0;
+    }
+  </style>
+</head>
+<body>
+  <button on="tap: wrapper.show">
+    Show
+  </button>
+  <button on="tap: wrapper.hide">
+    Hide
+  </button>
+  <button on="tap: wrapper.toggleVisibility">
+    Toggle
+  </button>
+  <div id="wrapper" hidden>
+    <input type="text"
+        autofocus
+        autocomplete="off"
+        placeholder="I'm a placeholder">
+    <span>focused</span>
+  </div>
+</body>
+</html>