Pin keyboard works with virtual keyboard.

chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js

Index: chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
diff --git a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
index 9b9ba5dad8b5dc2ba8c528ddea38566061751d5e..d3dc850d8c3e90b56678df0653492ca59509e6bd 100644
--- a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
@@ -40,11 +40,13 @@ Polymer({
     },
 
     /**
-     * Whether or not the keyboard's submit button should be shown.
+     * Whether or not the keyboard's input should be shown.
      */
-    enableSubmitButton: {
+    enableInputShown: {
       type: Boolean,
-      value: false
+      notify: true,
+      value: false,
+      observer: 'showInput_'
     },
 
     /** The value stored in the keyboard's input element. */
@@ -64,6 +66,15 @@ Polymer({
     return this.$$('#pin-input');
   },
 
+  /**
+   * Shows or hides the input element.
+   * @param {boolean} show
+   * @private
+   */
+  showInput_: function(show) {

[jdufault, 2016/08/24 01:35:10]

Use a property binding

[sammiequon, 2016/08/25 18:12:33]

Done.

+    this.$$('#pin-input').hidden = !show;
+  },
+
   /** Transfers focus to the input element. */
   focus: function() {
     this.$$('#pin-input').focus();
@@ -77,13 +88,6 @@ Polymer({
   onNumberTap_: function(event, detail) {
     var numberValue = event.target.getAttribute('value');
     this.value += numberValue;
-
-    // If a number button is clicked, we do not want to switch focus to the
-    // button, therefore we transfer focus back to the input, but if a number
-    // button is tabbed into, it should keep focus, so users can use tab and
-    // spacebar/return to enter their PIN.
-    if (!event.target.receivedFocusFromKeyboard)
-      this.focus();
   },
 
   /** Fires a submit event with the current PIN value. */
@@ -102,7 +106,8 @@ Polymer({
       this.fire('pin-change', { pin: value });
   },
 
-  /** Called when the user wants to erase the last character of the entered
+  /**
+   * Called when the user wants to erase the last character of the entered
    *  PIN value.
    */
   onPinClear_: function() {
@@ -127,6 +132,41 @@ Polymer({
   },
 
   /**
+   * Keypress does not handle backspace but handles the char codes nicely, so we
+   * have a seperate event to process the backspaces.
+   * @param {Event} e Keypress Event object.
+   * @private
+   */
+  onKeyDown_: function(event) {
+    // Backspace pressed.
+    if (event.keyCode == 8) {
+      this.onPinClear_();
+      event.preventDefault();
+      return;
+    }
+  },
+
+  /**
+   * Called when a key press event is fired while the number button is focused.
+   * Ideally we would want to pass focus back to the input element, but the we
+   * cannot or the virtual keyboard will keep poping up.
+   * @param {Event} e Keypress Event object.
+   * @private
+   */
+  onKeyPress_: function(event) {
+    var code = event.keyCode;
+
+    // Enter pressed.
+    if (code == 13) {
+      this.firePinSubmitEvent_();
+      event.preventDefault();
+      return;
+    }
+
+    this.value += String.fromCharCode(code);
+  },
+
+  /**
    * Changes the color of the submit button if PIN is ready.
    * @param {string} value
    * @private