[CrOS Settings] Prevent pin input from losing focus incorrectly.

Currently, when any inactive digit area is clicked or tapped in the row
containers (i.e backbutton when pin is empty or empty digit button
next to 0), the pin input loses focus momentarily.  This CL ensures
that extraneous clicks on the immediate parent of the digits will not
cause the pin input form to lose focus.

Fixed: 1034939
Change-Id: I7d687508944411cb596b1453e3f61eaeb9b9d4b6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1977746
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#726690}

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html

@@ -194,7 +194,7 @@
         </cr-input>
       </div>
       <slot select="[problem]"></slot>
-      <div id="rowsContainer">
+      <div id="rowsContainer" on-mousedown="onRowContainerMousedown_">
         <div class="row">
           <cr-button class="digit-button" on-tap="onNumberTap_" value="1"
               disabled="[[disabled]]" circle-ripple>

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.js

@@ -422,6 +422,17 @@ Polymer({
     return false;
   },
 
+  /**
+   * Called when the row container is pressed while the input element has focus.
+   * @param {Event} event The event object.
+   * @private
+   */
+  onRowContainerMousedown_: function(event) {
+    // Prevent the pin input from losing focus when extraneous areas of the
+    // row container are clicked.
+    event.preventDefault();
+  },
+
   /**
    * Called when a key event is pressed while the input element has focus.
    * @param {Event} event The event object.