Skip to content

Commit

Permalink
[ISSUE-219] Fix cursor jumping issue (#314)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nosir
nosir authored Mar 20, 2018
1 parent 9956467 commit 21fe37e
Show file tree
Hide file tree
Showing 13 changed files with 138 additions and 50 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"form",
"input"
],
"version": "1.1.6",
"version": "1.2.0",
"author": {
"name": "Max Huang",
"email": "[email protected]",
Expand Down
23 changes: 20 additions & 3 deletions dist/cleave-angular.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,8 @@ return /******/ (function(modules) { // webpackBootstrap
},

updateValueState: function () {
var owner = this;
var owner = this,
pps = owner.properties;

if (!owner.element) {
return;
Expand All @@ -377,18 +378,20 @@ return /******/ (function(modules) { // webpackBootstrap
var endPos = owner.element.selectionEnd;
var oldValue = owner.element.value;

endPos += Cleave.Util.getPositionOffset(endPos, oldValue, pps.result, pps.delimiter, pps.delimiters);

// fix Android browser type="text" input field
// cursor not jumping issue
if (owner.isAndroid) {
window.setTimeout(function () {
owner.element.value = owner.properties.result;
owner.element.value = pps.result;
owner.setCurrentSelection(endPos, oldValue);
}, 1);

return;
}

owner.element.value = owner.properties.result;
owner.element.value = pps.result;
owner.setCurrentSelection(endPos, oldValue);
},

Expand Down Expand Up @@ -946,6 +949,16 @@ return /******/ (function(modules) { // webpackBootstrap
return new RegExp(delimiter.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'g');
},

getPositionOffset: function (prevPos, oldValue, newValue, delimiter, delimiters) {
var oldRawValue, newRawValue, lengthOffset;

oldRawValue = this.stripDelimiters(oldValue.slice(0, prevPos), delimiter, delimiters);
newRawValue = this.stripDelimiters(newValue.slice(0, prevPos), delimiter, delimiters);
lengthOffset = oldRawValue.length - newRawValue.length;

return (lengthOffset !== 0) ? (lengthOffset / Math.abs(lengthOffset)) : 0;
},

stripDelimiters: function (value, delimiter, delimiters) {
var owner = this;

Expand Down Expand Up @@ -1046,6 +1059,10 @@ return /******/ (function(modules) { // webpackBootstrap
// move cursor to the end
// the first time user focuses on an input with prefix
fixPrefixCursor: function (el, prefix, delimiter, delimiters) {
if (!el) {
return;
}

var val = el.value,
appendix = delimiter || (delimiters[0] || ' ');

Expand Down
4 changes: 2 additions & 2 deletions dist/cleave-angular.min.js
View file

Large diffs are not rendered by default.

37 changes: 27 additions & 10 deletions dist/cleave-react-node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (newValue !== undefined) {
newValue = newValue.toString();

if (newValue !== owner.state.value && newValue !== owner.properties.result) {
if (newValue !== owner.properties.initValue && newValue !== owner.properties.result) {
owner.properties.initValue = newValue;
owner.onInput(newValue, true);
}
Expand Down Expand Up @@ -447,24 +447,27 @@ return /******/ (function(modules) { // webpackBootstrap
},

updateValueState: function updateValueState() {
var owner = this;
var owner = this,
pps = owner.properties;

if (!owner.element) {
owner.setState({ value: owner.properties.result });
owner.setState({ value: pps.result });
}

var endPos = owner.element.selectionEnd;
var oldValue = owner.element.value;
var newValue = owner.properties.result;
var nextCursorPosition = owner.getNextCursorPosition(endPos, oldValue, newValue);
var newValue = pps.result;

owner.lastInputValue = owner.properties.result;
owner.lastInputValue = pps.result;

endPos = owner.getNextCursorPosition(endPos, oldValue, newValue);
endPos += Util.getPositionOffset(endPos, oldValue, newValue, pps.delimiter, pps.delimiters);

if (owner.isAndroid) {
window.setTimeout(function () {
owner.setState({
value: owner.properties.result,
cursorPosition: nextCursorPosition,
value: newValue,
cursorPosition: endPos,
updateCursorPosition: true
});
}, 1);
Expand All @@ -473,8 +476,8 @@ return /******/ (function(modules) { // webpackBootstrap
}

owner.setState({
value: owner.properties.result,
cursorPosition: nextCursorPosition,
value: newValue,
cursorPosition: endPos,
updateCursorPosition: true
});
},
Expand Down Expand Up @@ -2198,6 +2201,16 @@ return /******/ (function(modules) { // webpackBootstrap
return new RegExp(delimiter.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'g');
},

getPositionOffset: function getPositionOffset(prevPos, oldValue, newValue, delimiter, delimiters) {
var oldRawValue, newRawValue, lengthOffset;

oldRawValue = this.stripDelimiters(oldValue.slice(0, prevPos), delimiter, delimiters);
newRawValue = this.stripDelimiters(newValue.slice(0, prevPos), delimiter, delimiters);
lengthOffset = oldRawValue.length - newRawValue.length;

return lengthOffset !== 0 ? lengthOffset / Math.abs(lengthOffset) : 0;
},

stripDelimiters: function stripDelimiters(value, delimiter, delimiters) {
var owner = this;

Expand Down Expand Up @@ -2298,6 +2311,10 @@ return /******/ (function(modules) { // webpackBootstrap
// move cursor to the end
// the first time user focuses on an input with prefix
fixPrefixCursor: function fixPrefixCursor(el, prefix, delimiter, delimiters) {
if (!el) {
return;
}

var val = el.value,
appendix = delimiter || delimiters[0] || ' ';

Expand Down
4 changes: 2 additions & 2 deletions dist/cleave-react-node.min.js
View file

Large diffs are not rendered by default.

37 changes: 27 additions & 10 deletions dist/cleave-react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (newValue !== undefined) {
newValue = newValue.toString();

if (newValue !== owner.state.value && newValue !== owner.properties.result) {
if (newValue !== owner.properties.initValue && newValue !== owner.properties.result) {
owner.properties.initValue = newValue;
owner.onInput(newValue, true);
}
Expand Down Expand Up @@ -447,24 +447,27 @@ return /******/ (function(modules) { // webpackBootstrap
},

updateValueState: function updateValueState() {
var owner = this;
var owner = this,
pps = owner.properties;

if (!owner.element) {
owner.setState({ value: owner.properties.result });
owner.setState({ value: pps.result });
}

var endPos = owner.element.selectionEnd;
var oldValue = owner.element.value;
var newValue = owner.properties.result;
var nextCursorPosition = owner.getNextCursorPosition(endPos, oldValue, newValue);
var newValue = pps.result;

owner.lastInputValue = owner.properties.result;
owner.lastInputValue = pps.result;

endPos = owner.getNextCursorPosition(endPos, oldValue, newValue);
endPos += Util.getPositionOffset(endPos, oldValue, newValue, pps.delimiter, pps.delimiters);

if (owner.isAndroid) {
window.setTimeout(function () {
owner.setState({
value: owner.properties.result,
cursorPosition: nextCursorPosition,
value: newValue,
cursorPosition: endPos,
updateCursorPosition: true
});
}, 1);
Expand All @@ -473,8 +476,8 @@ return /******/ (function(modules) { // webpackBootstrap
}

owner.setState({
value: owner.properties.result,
cursorPosition: nextCursorPosition,
value: newValue,
cursorPosition: endPos,
updateCursorPosition: true
});
},
Expand Down Expand Up @@ -2392,6 +2395,16 @@ return /******/ (function(modules) { // webpackBootstrap
return new RegExp(delimiter.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'g');
},

getPositionOffset: function getPositionOffset(prevPos, oldValue, newValue, delimiter, delimiters) {
var oldRawValue, newRawValue, lengthOffset;

oldRawValue = this.stripDelimiters(oldValue.slice(0, prevPos), delimiter, delimiters);
newRawValue = this.stripDelimiters(newValue.slice(0, prevPos), delimiter, delimiters);
lengthOffset = oldRawValue.length - newRawValue.length;

return lengthOffset !== 0 ? lengthOffset / Math.abs(lengthOffset) : 0;
},

stripDelimiters: function stripDelimiters(value, delimiter, delimiters) {
var owner = this;

Expand Down Expand Up @@ -2492,6 +2505,10 @@ return /******/ (function(modules) { // webpackBootstrap
// move cursor to the end
// the first time user focuses on an input with prefix
fixPrefixCursor: function fixPrefixCursor(el, prefix, delimiter, delimiters) {
if (!el) {
return;
}

var val = el.value,
appendix = delimiter || delimiters[0] || ' ';

Expand Down
4 changes: 2 additions & 2 deletions dist/cleave-react.min.js
View file

Large diffs are not rendered by default.

23 changes: 20 additions & 3 deletions dist/cleave.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,8 @@ return /******/ (function(modules) { // webpackBootstrap
},

updateValueState: function () {
var owner = this;
var owner = this,
pps = owner.properties;

if (!owner.element) {
return;
Expand All @@ -377,18 +378,20 @@ return /******/ (function(modules) { // webpackBootstrap
var endPos = owner.element.selectionEnd;
var oldValue = owner.element.value;

endPos += Cleave.Util.getPositionOffset(endPos, oldValue, pps.result, pps.delimiter, pps.delimiters);

// fix Android browser type="text" input field
// cursor not jumping issue
if (owner.isAndroid) {
window.setTimeout(function () {
owner.element.value = owner.properties.result;
owner.element.value = pps.result;
owner.setCurrentSelection(endPos, oldValue);
}, 1);

return;
}

owner.element.value = owner.properties.result;
owner.element.value = pps.result;
owner.setCurrentSelection(endPos, oldValue);
},

Expand Down Expand Up @@ -946,6 +949,16 @@ return /******/ (function(modules) { // webpackBootstrap
return new RegExp(delimiter.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'g');
},

getPositionOffset: function (prevPos, oldValue, newValue, delimiter, delimiters) {
var oldRawValue, newRawValue, lengthOffset;

oldRawValue = this.stripDelimiters(oldValue.slice(0, prevPos), delimiter, delimiters);
newRawValue = this.stripDelimiters(newValue.slice(0, prevPos), delimiter, delimiters);
lengthOffset = oldRawValue.length - newRawValue.length;

return (lengthOffset !== 0) ? (lengthOffset / Math.abs(lengthOffset)) : 0;
},

stripDelimiters: function (value, delimiter, delimiters) {
var owner = this;

Expand Down Expand Up @@ -1046,6 +1059,10 @@ return /******/ (function(modules) { // webpackBootstrap
// move cursor to the end
// the first time user focuses on an input with prefix
fixPrefixCursor: function (el, prefix, delimiter, delimiters) {
if (!el) {
return;
}

var val = el.value,
appendix = delimiter || (delimiters[0] || ' ');

Expand Down
Loading

0 comments on commit 21fe37e

Please sign in to comment.