Forgot to update CSS class names after removing the ui- prefix ( as r…

…equested ). Added selection range to address input cursor jumping to end if editing text within input.

docs/assets/style.css

@@ -133,32 +133,32 @@ article {
 }
 
 /* Credit Card Number */
-.ui-component-credit-card-number .credit-card-images {
+.component-credit-card-number .credit-card-images {
   padding: 8px 0;
   margin-left: 90px;
 }
-.ui-component-credit-card-number .card-image {
+.component-credit-card-number .card-image {
   width: 48px;
   margin-right: 5px;
 }
-.ui-component-credit-card-number .card-image.disabled {
+.component-credit-card-number .card-image.disabled {
   opacity: 0.25;
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
 }
-.ui-component-credit-card-number .card-image.active {
+.component-credit-card-number .card-image.active {
   opacity: 1;
 }
-.ui-component-credit-card-number .credit-card-number-input {
+.component-credit-card-number .credit-card-number-input {
   padding: 0 12px;
   width: 206px;
 }
-.ui-component-credit-card-number .credit-card-number-input.has-error {
+.component-credit-card-number .credit-card-number-input.has-error {
   color: #c7254e;
 }
-.ui-component-credit-card-number .credit-card-number-label {
+.component-credit-card-number .credit-card-number-label {
   width: 90px;
 }

src/components/credit-card-number/code/views/creditCardNumberView.jsx

@@ -95,8 +95,13 @@ module.exports = React.createClass({
   },
 
   handleChange: function(e) {
+    var selectionStart = e.target.selectionStart;
+    var selectionEnd = e.target.selectionEnd;
+
     var cardNumber = e.target.value.replace(/\D/g, '');
     this.updateCard(cardNumber);
+
+    e.target.setSelectionRange(selectionStart, selectionEnd);
   },
 
   render: function() {