Merge pull request #28 from braintree/fix-samsung-first-char-selection

Fix Samsung first character selection

lib/strategies/android-chrome.js

@@ -2,7 +2,6 @@
 
 var keyCannotMutateValue = require('../key-cannot-mutate-value');
 var BaseStrategy = require('./base');
-var getSelection = require('../input-selection').get;
 var setSelection = require('../input-selection').set;
 
 function AndroidChromeStrategy(options) {
@@ -56,16 +55,20 @@ AndroidChromeStrategy.prototype._afterReformatInput = function (formattedState)
   // of the input has changed when adding
   // permacharacters. This results in the selection
   // putting the cursor before the permacharacter,
-  // instead of after. So we setTimeout and check
-  // the position of the cursor. If it does not match
-  // the formatted input, we set it again
+  // instead of after.
+  //
+  // There is also the case of some Android Chrome
+  // keyboards reporting a ranged selection on the
+  // first character input. Restricted Input maintains
+  // that range even though it is incorrect from the
+  // keyboard.
+  //
+  // To resolve these issues we setTimeout and reset
+  // the selection to the formatted end position.
   setTimeout(function () {
     var formattedSelection = formattedState.selection;
-    var selection = getSelection(input);
 
-    if (selection.start !== formattedSelection.start) {
-      setSelection(input, formattedSelection.start, formattedSelection.end);
-    }
+    setSelection(input, formattedSelection.end, formattedSelection.end);
   }, 0);
 };
 

test/support/index.html

@@ -86,6 +86,11 @@
       <input id="cvv" type="tel" placeholder="123" data-pattern="{{9999}}" />
     </div>
 
+    <div class="input-wrapper">
+      <label for="postal-code">Postal Code</Label>
+      <input type="text" maxlength="10" placeholder="H0H 0H0" data-pattern="{{**********}}"/>
+    </div>
+
     <div class="input-wrapper">
       <label for="phone-number">US Phone Number</label>
       <input id="phone-number" type="tel" placeholder="(312) 123-2345" data-pattern="({{999}}) {{999}}-{{9999}}" />