From 33a14b46b86e23b015f37a616060bec3602ededa Mon Sep 17 00:00:00 2001
From: Caroline Liu <10456171+caroqliu@users.noreply.github.com>
Date: Fri, 15 Feb 2019 12:35:50 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Prevent=20toggle()=20from=20thro?=
 =?UTF-8?q?wing=20error=20when=20no=20elements=20are=20selected.=20(#20795?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/selector.amp.html                  | 59 +++++++++++++++++++++
 extensions/amp-selector/0.1/amp-selector.js | 10 +++-
 2 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 examples/selector.amp.html
diff --git a/examples/selector.amp.html b/examples/selector.amp.html
new file mode 100644
index 0000000000000..84a07ef95cd7d
--- /dev/null
+++ b/examples/selector.amp.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>AMP Selector Demo</title>
+  <link rel="canonical" href="amps.html">
+  <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 custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
+</head>
+<body>
+    <h1>Selector Examples</h1>
+    <h2>Single Select</h2>
+    <amp-selector class="sample-selector"
+        layout="container">
+    <ul>
+        <li option="1">Option 1</li>
+        <li option="2">Option 2</li>
+        <li option="3">Option 3</li>
+        <li option="4">Option 4</li>
+    </ul>
+    </amp-selector>
+
+    <h2>Multi Select</h2>
+    <amp-selector layout="container"
+    class="sample-selector"
+    multiple>
+    <ul>
+        <li option="1">Option 1</li>
+        <li option="2">Option 2</li>
+        <li option="3">Option 3</li>
+        <li option="4">Option 4</li>
+    </ul>
+    </amp-selector>
+    
+    <h2>Actions</h2>
+    <amp-selector id="actionsSample"
+  layout="container"
+  class="sample-selector"
+  multiple>
+  <ul>
+        <li option="1">Option 1</li>
+        <li option="2">Option 2</li>
+        <li option="3">Option 3</li>
+        <li option="4">Option 4</li>
+        <li option="5">Option 5</li>
+        <li option="6">Option 6</li>
+    </ul>
+    </amp-selector>
+<button on="tap:actionsSample.clear">clear</button>
+<button on="tap:actionsSample.selectUp">selectUp</button>
+<button on="tap:actionsSample.selectUp(delta=2)">selectUp(delta=2)</button>
+<button on="tap:actionsSample.selectDown">selectDown</button>
+<button on="tap:actionsSample.selectDown(delta=2)">selectDown(delta=2)</button>
+<button on="tap:actionsSample.toggle(index=1)">toggle(index=1)</button>
+<button on="tap:actionsSample.toggle(index=1, value=true)">toggle(index=1, value=true)</button>
+</body>
+</html>
diff --git a/extensions/amp-selector/0.1/amp-selector.js b/extensions/amp-selector/0.1/amp-selector.js
index 9b77d4b7e3b6b..044655388553b 100644
--- a/extensions/amp-selector/0.1/amp-selector.js
+++ b/extensions/amp-selector/0.1/amp-selector.js
@@ -396,7 +396,10 @@ export class AmpSelector extends AMP.BaseElement {
     // There is a change of the `selected` attribute for the element
     if (selectedIndex !== index) {
       this.setSelection_(el);
-      this.clearSelection_(this.elements_[selectedIndex]);
+      const selectedEl = this.elements_[selectedIndex];
+      if (selectedEl) {
+        this.clearSelection_(selectedEl);
+      }
     } else {
       this.clearSelection_(el);
     }
@@ -435,7 +438,10 @@ export class AmpSelector extends AMP.BaseElement {
     const normalizedIndex = mod(index, this.elements_.length);
 
     this.setSelection_(this.elements_[normalizedIndex]);
-    this.clearSelection_(this.elements_[previousIndex]);
+    const previousEl = this.elements_[previousIndex];
+    if (previousEl) {
+      this.clearSelection_(previousEl);
+    }
   }
 
   /**
