Add up-arrow key to open

Add escape key to revert
Remove automatic-closing behavior

js/components/selector.js

@@ -9,7 +9,8 @@ const SelectorInput = {
     description: String,
     selected: Boolean,
     handleChange: Function,
-    handleEnter: Function
+    handleEnter: Function,
+    handleEsc: Function
   },
 
   computed: {
@@ -25,6 +26,10 @@ const SelectorInput = {
 
     onEnter: function (e) {
       this.handleEnter()
+    },
+
+    onEsc: function (e) {
+      this.handleEsc()
     }
   }
 }
@@ -51,6 +56,7 @@ export default {
   data: function () {
     return {
       value: this.initialChoice || null,
+      currentChoice: this.initialChoice || null,
       showError: (this.initialErrors && this.initialErrors.length) || false,
       usingKeyboard: false
     }
@@ -74,17 +80,27 @@ export default {
     change: function (value) {
       this.value = value
       this.showError = false
-      if (!this.usingKeyboard) {
-        setTimeout(() => this.$refs.popover.hide(), 300)
-      }
+    },
+
+    onShow: function () {
+      setTimeout(() => { // timeout is a hack to make focus work in Chrome
+        this.$refs.choices.find(choice => choice.selected).$refs.input[0].focus()
+      }, 100)
     },
 
     enter: function () {
       this.$refs.popover.hide()
     },
 
+    esc: function () {
+      this.value = this.currentChoice
+      this.usingKeyboard = false
+      this.$refs.popover.hide()
+    },
+
     handleEnterOption: function (e) {
       this.change(e.target.value)
+      this.currentChoice = e.target.value
       this.usingKeyboard = false
       this.$refs.popover.hide()
     },
@@ -92,7 +108,6 @@ export default {
     handleButtonArrowDown: function (e) {
       this.usingKeyboard = true
       this.$refs.popover.show()
-      this.$refs.choices.find(choice => choice.selected).$refs.input[0].focus()
     }
   },
 }

templates/components/selector.html

@@ -11,7 +11,7 @@
   inline-template>
 
   <fieldset v-bind:class="['selector usa-input', { 'usa-input--error': initialErrors }]">
-    <v-popover v-bind:container='false' ref='popover'>
+    <v-popover v-bind:container='false' ref='popover' v-on:show='onShow'>
       <legend>
         <div class="usa-input__title">{{ field.label | striptags }}</div>
 
@@ -27,6 +27,7 @@
         type='button'
         v-html='label'
         v-on:keydown.down.prevent.stop='handleButtonArrowDown'
+        v-on:keydown.up.prevent.stop='handleButtonArrowDown'
         v-tooltip='{ container:false }'>
       </button>
 
@@ -53,6 +54,7 @@
                   v-bind:selected='value === choice[0]'
                   v-bind:handle-change='change'
                   v-bind:handle-enter='enter'
+                  v-bind:handle-esc='esc'
                   inline-template>
 
                   <div>
@@ -64,8 +66,10 @@
                       v-bind:id='id'
                       v-bind:value='value'
                       v-bind:checked='selected'
+                      v-bind:autofocus='selected'
                       v-on:change='onChange'
-                      v-on:keydown.enter.prevent.stop='onEnter'/>
+                      v-on:keydown.enter.prevent.stop='onEnter'
+                      v-on:keydown.esc.prevent.stop='onEsc'/>
 
                     <label v-bind:for='id'>
                       <template v-if='description'>