Pin keyboard works with virtual keyboard.

ui/login/account_picker/screen_account_picker.js

Index: ui/login/account_picker/screen_account_picker.js
diff --git a/ui/login/account_picker/screen_account_picker.js b/ui/login/account_picker/screen_account_picker.js
index 198888fab8786fbf496e4d6769d9fedd55c0519a..b29291b152c0db31820eb09322d3f11d7e3ad643 100644
--- a/ui/login/account_picker/screen_account_picker.js
+++ b/ui/login/account_picker/screen_account_picker.js
@@ -180,18 +180,38 @@ login.createScreen('AccountPickerScreen', 'account-picker', function() {
         // We want bubble's arrow to point to the first letter of input.
         /** @const */ var BUBBLE_OFFSET = 7;
         /** @const */ var BUBBLE_PADDING = 4;
-        $('bubble').showContentForElement(activatedPod.mainInput,
-                                          cr.ui.Bubble.Attachment.BOTTOM,
-                                          error,
-                                          BUBBLE_OFFSET, BUBBLE_PADDING);
+
+        // We want the bubble to point to where the input is after it is done
+        // tranisitioning.
+        var showBottomCallback = function() {
+          activatedPod.removeEventListener("webkitTransitionEnd",
+              showBottomCallback);
+          $('bubble').showContentForElement(activatedPod.mainInput,
+                                            cr.ui.Bubble.Attachment.BOTTOM,
+                                            error,
+                                            BUBBLE_OFFSET, BUBBLE_PADDING);
+        };
+        activatedPod.addEventListener("webkitTransitionEnd", showBottomCallback,
+                                      false);
+        // Guard timer set to animation duration + 20ms.
+        ensureTransitionEndEvent(activatedPod, 200);

[jdufault, 2016/08/25 18:35:09]

Remove 200, ensureTransitionEndEvent(activatedPod) will lookup the transition by
with +50ms padding by default.

[sammiequon, 2016/08/25 23:29:40]

Done.

+
         // Move error bubble up if it overlaps the shelf.
         var maxHeight =
             cr.ui.LoginUITools.getMaxHeightBeforeShelfOverlapping($('bubble'));
         if (maxHeight < $('bubble').offsetHeight) {
-          $('bubble').showContentForElement(activatedPod.mainInput,
-                                            cr.ui.Bubble.Attachment.TOP,
-                                            error,
-                                            BUBBLE_OFFSET, BUBBLE_PADDING);
+          var showTopCallback = function() {
+            activatedPod.removeEventListener("webkitTransitionEnd",
+                showTopCallback);
+            $('bubble').showContentForElement(activatedPod.mainInput,
+                                              cr.ui.Bubble.Attachment.TOP,
+                                              error,
+                                              BUBBLE_OFFSET, BUBBLE_PADDING);
+          };
+          activatedPod.addEventListener("webkitTransitionEnd", showTopCallback,
+                                        false);

[jdufault, 2016/08/25 18:35:09]

Do you need the false parameter?

[sammiequon, 2016/08/25 23:29:40]

According to the web, some old browsers still need this useCapture to be set
explicitly.

[jdufault, 2016/08/26 01:12:30]

This code will only ever run on Chrome (and possibly also Chrome iOS).

[sammiequon, 2016/08/29 22:00:21]

Done.

+          // Guard timer set to animation duration + 20ms.
+          ensureTransitionEndEvent(activatedPod, 200);

[jdufault, 2016/08/25 18:35:08]

Ditto

[sammiequon, 2016/08/25 23:29:40]

Done.

         }
       }
     },
@@ -355,11 +375,11 @@ login.createScreen('AccountPickerScreen', 'account-picker', function() {
     },
 
     /**
-     * Hides the PIN keyboard if it's active.
+     * Removes the PIN keyboard so the user can no longer enter a PIN.
      * @param {!user} user The user who can no longer enter a PIN.
      */
     disablePinKeyboardForUser: function(user) {
-      $('pod-row').setPinVisibility(user, false);
+      $('pod-row').removePinKeyboard(user);
     },
 
     /**