cros: Allow pin keyboard to keep focus without popping up the pin keyboard.

ui/login/account_picker/user_pod_row.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview User pod row implementation.
  */
 
 cr.define('login', function() {
   /**
@@ skipping 698 matching lines @@
       this.tabIndex = UserPodTabOrder.POD_INPUT;
       this.actionBoxAreaElement.tabIndex = UserPodTabOrder.POD_INPUT;
 
       this.addEventListener('keydown', this.handlePodKeyDown_.bind(this));
       this.addEventListener('click', this.handleClickOnPod_.bind(this));
       this.addEventListener('mousedown', this.handlePodMouseDown_.bind(this));
 
       if (this.pinKeyboard) {
         this.pinKeyboard.addEventListener('pin-change',
             this.handlePinChanged_.bind(this));
+        this.pinKeyboard.addEventListener('pin-focus',
+            this.handlePinFocused_.bind(this));
+        this.pinKeyboard.addEventListener('pin-clear',
+            this.handlePinCleared_.bind(this));
       }
 
       this.actionBoxAreaElement.addEventListener('mousedown',
                                                  stopEventPropagation);
       this.actionBoxAreaElement.addEventListener('click',
           this.handleActionAreaButtonClick_.bind(this));
       this.actionBoxAreaElement.addEventListener('keydown',
           this.handleActionAreaButtonKeyDown_.bind(this));
 
       this.actionBoxMenuTitleElement.addEventListener('keydown',
@@ skipping 19 matching lines @@
     /**
      * Initializes the pod after its properties set and added to a pod row.
      */
     initialize: function() {
       this.passwordElement.addEventListener('keydown',
           this.parentNode.handleKeyDown.bind(this.parentNode));
       this.passwordElement.addEventListener('keypress',
           this.handlePasswordKeyPress_.bind(this));
       this.passwordElement.addEventListener('input',
           this.handleInputChanged_.bind(this));
+      this.passwordElement.addEventListener('mouseup',
+          this.handleInputMouseUp_.bind(this));
 
       if (this.submitButton) {
         this.submitButton.addEventListener('click',
             this.handleSubmitButtonClick_.bind(this));
       }
 
       this.imageElement.addEventListener('load',
           this.parentNode.handlePodImageLoad.bind(this.parentNode, this));
 
       var initialAuthType = this.user.initialAuthType ||
@@ skipping 392 matching lines @@
       for (var i = 0; i < elements.length; ++i)
         this.updatePinClass_(elements[i], visible);
       this.updatePinClass_(this, visible);
 
       // Set the focus to the input element after showing/hiding pin keyboard.
       this.mainInput.focus();
 
       // Change the password placeholder based on pin keyboard visibility.
       this.passwordElement.placeholder = loadTimeData.getString(visible ?
           'pinKeyboardPlaceholderPinPassword' : 'passwordHint');
+
+      chrome.send('setForceDisableVirtualKeyboard', [visible]);
     },
 
     isPinShown: function() {
       return this.classList.contains('pin-enabled');
     },
 
     setUserPodIconType: function(userTypeClass) {
       this.userTypeIconAreaElement.classList.add(userTypeClass);
       this.userTypeIconAreaElement.hidden = false;
     },
@@ skipping 689 matching lines @@
     /**
      * Handles pin change event from the pin keyboard.
      * @param {Event} e Pin change event.
      */
     handlePinChanged_: function(e) {
       this.passwordElement.value = e.detail.pin;
       this.updateInput_();
     },
 
     /**
+     * Handles pin focus event from the pin keyboard.
+     * @param {Event} e Pin focus event.
+     */
+    handlePinFocused_: function(e) {
+      this.mainInput.focus();
+    },
+
+    /**
+     * Handles pin clear event from the pin keyboard.
+     * @param {Event} e Pin clear event.
+     */
+    handlePinCleared_: function(e) {

[jdufault, 2016/10/31 22:28:49]

Could this be handled by the pin-change event?

What about handling the pin-keyboard an override input element, ie,

  <pin-keyboard override-input="{{passwordElement}}">

Then the pin keyboard would just use that instead of the default input element
it contains. Then we could also get rid of the pin-change/etc events.

[sammiequon, 2016/11/02 18:08:41]

Done.

+      // Clear the text based on the caret location or selected region of the

[jdufault, 2016/10/31 22:28:49]

Add these comments in the other implementation.

[sammiequon, 2016/11/02 18:07:54]

Done.

+      // password element.
+      var selectionStart = this.passwordElement.selectionStart;
+      var selectionEnd = this.passwordElement.selectionEnd;
+
+      // If it is just a caret, remove the character in front of the caret.
+      if (selectionStart == selectionEnd)
+        selectionStart--;
+      this.passwordElement.value =
+          this.passwordElement.value.substring(0, selectionStart) +
+          this.passwordElement.value.substring(selectionEnd);
+
+      // Move the caret or selected region to the correct new place.
+      this.passwordElement.setSelectionRange(selectionStart, selectionStart);
+      this.handleInputChanged_(e);
+    },
+
+    /**
      * Handles input event on the password element.
      * @param {Event} e Input event.
      */
     handleInputChanged_: function(e) {
       if (this.pinKeyboard)
         this.pinKeyboard.value = this.passwordElement.value;
-      if (this.submitButton)
-        this.submitButton.disabled = this.passwordElement.value.length <= 0;
       this.updateInput_();
     },
 
     /**
+     * Handles mouse up event on the password element.
+     * @param {Event} e Mouse up event.
+     */
+    handleInputMouseUp_: function(e) {
+      // If the PIN keyboard is shown and the user clicks on the password
+      // element, the virtual keyboard should pop up if it is enabled, so we
+      // must disable the virtual keyboard override.
+      if (this.isPinShown()) {
+        chrome.send('setForceDisableVirtualKeyboard', [false]);
+      }
+    },
+
+    /**
      * Handles click event on a user pod.
      * @param {Event} e Click event.
      */
     handleClickOnPod_: function(e) {
       if (this.parentNode.disabled)
         return;
 
       if (!this.isActionBoxMenuActive) {
         if (this.isAuthTypeOnlineSignIn) {
           this.showSigninUI();
@@ skipping 1751 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });