Skip to content

Commit

Permalink
[ISSUE-332] Fix some cursor jumping issue (#360)
Browse files Browse the repository at this point in the history 
* [ISSUE-332] Fix back cursor jumping issue

* [ISSUE-332] Regenerate assets
  • Loading branch information
@nosir
nosir authored Jun 3, 2018
1 parent 21c85d6 commit eb5f7b2
Show file tree
Hide file tree
Showing 12 changed files with 147 additions and 190 deletions.
47 changes: 29 additions & 18 deletions dist/cleave-angular.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -350,21 +350,9 @@ return /******/ (function(modules) { // webpackBootstrap
}
},

setCurrentSelection: function (endPos, oldValue) {
var owner = this,
pps = owner.properties;

// If cursor was at the end of value, just place it back.
// Because new value could contain additional chars.
if (oldValue.length === endPos) {
return;
}

Cleave.Util.setSelection(owner.element, endPos, pps.document);
},

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

if (!owner.element) {
Expand All @@ -373,22 +361,30 @@ return /******/ (function(modules) { // webpackBootstrap

var endPos = owner.element.selectionEnd;
var oldValue = owner.element.value;
var newValue = pps.result;

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

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

return;
}

owner.element.value = pps.result;
owner.setCurrentSelection(endPos, oldValue);
owner.element.value = newValue;
Util.setSelection(owner.element, endPos, pps.document, false);
owner.callOnValueChanged();
},

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

pps.onValueChanged.call(owner, {
target: {
Expand Down Expand Up @@ -1012,6 +1008,16 @@ return /******/ (function(modules) { // webpackBootstrap
return new RegExp(delimiter.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'g');
},

getNextCursorPosition: function (prevPos, oldValue, newValue, delimiter, delimiters) {
// If cursor was at the end of value, just place it back.
// Because new value could contain additional chars.
if (oldValue.length === prevPos) {
return newValue.length;
}

return prevPos + this.getPositionOffset(prevPos, oldValue, newValue, delimiter ,delimiters);
},

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

Expand Down Expand Up @@ -1151,6 +1157,11 @@ return /******/ (function(modules) { // webpackBootstrap
return;
}

// cursor is already in the end
if (element && element.value.length <= position) {
return;
}

if (element.createTextRange) {
var range = element.createTextRange();

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

Large diffs are not rendered by default.

66 changes: 24 additions & 42 deletions dist/cleave-react-node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,10 @@ return /******/ (function(modules) { // webpackBootstrap
},

componentDidUpdate: function componentDidUpdate() {
var owner = this;

if (!owner.state.updateCursorPosition) {
return;
}
var owner = this,
pps = owner.properties;

owner.setCurrentSelection(owner.state.cursorPosition);
Util.setSelection(owner.element, owner.state.cursorPosition, pps.document);
},

componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
Expand Down Expand Up @@ -130,14 +127,14 @@ return /******/ (function(modules) { // webpackBootstrap
if (!options) {
options = {};
}

options.initValue = value;

owner.properties = DefaultProperties.assign({}, options);

return {
value: owner.properties.result,
cursorPosition: 0,
updateCursorPosition: false
cursorPosition: 0
};
},

Expand Down Expand Up @@ -418,27 +415,6 @@ return /******/ (function(modules) { // webpackBootstrap
}
},

getNextCursorPosition: function getNextCursorPosition(endPos, oldValue, newValue) {
// If cursor was at the end of value, just place it back.
// Because new value could contain additional chars.
if (oldValue.length === endPos) {
return newValue.length;
}

return endPos;
},

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

this.setState({
updateCursorPosition: false
});

Util.setSelection(owner.element, cursorPosition, pps.document);
},

updateValueState: function updateValueState() {
var owner = this,
pps = owner.properties;
Expand All @@ -451,28 +427,19 @@ return /******/ (function(modules) { // webpackBootstrap
var oldValue = owner.element.value;
var newValue = pps.result;

owner.lastInputValue = pps.result;
owner.lastInputValue = newValue;

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

if (owner.isAndroid) {
window.setTimeout(function () {
owner.setState({
value: newValue,
cursorPosition: endPos,
updateCursorPosition: true
});
owner.setState({ value: newValue, cursorPosition: endPos });
}, 1);

return;
}

owner.setState({
value: newValue,
cursorPosition: endPos,
updateCursorPosition: true
});
owner.setState({ value: newValue, cursorPosition: endPos });
},

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

getNextCursorPosition: function getNextCursorPosition(prevPos, oldValue, newValue, delimiter, delimiters) {
// If cursor was at the end of value, just place it back.
// Because new value could contain additional chars.
if (oldValue.length === prevPos) {
return newValue.length;
}

return prevPos + this.getPositionOffset(prevPos, oldValue, newValue, delimiter, delimiters);
},

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

Expand Down Expand Up @@ -2337,6 +2314,11 @@ return /******/ (function(modules) { // webpackBootstrap
return;
}

// cursor is already in the end
if (element && element.value.length <= position) {
return;
}

if (element.createTextRange) {
var range = element.createTextRange();

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

Large diffs are not rendered by default.

66 changes: 24 additions & 42 deletions dist/cleave-react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,10 @@ return /******/ (function(modules) { // webpackBootstrap
},

componentDidUpdate: function componentDidUpdate() {
var owner = this;

if (!owner.state.updateCursorPosition) {
return;
}
var owner = this,
pps = owner.properties;

owner.setCurrentSelection(owner.state.cursorPosition);
Util.setSelection(owner.element, owner.state.cursorPosition, pps.document);
},

componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
Expand Down Expand Up @@ -130,14 +127,14 @@ return /******/ (function(modules) { // webpackBootstrap
if (!options) {
options = {};
}

options.initValue = value;

owner.properties = DefaultProperties.assign({}, options);

return {
value: owner.properties.result,
cursorPosition: 0,
updateCursorPosition: false
cursorPosition: 0
};
},

Expand Down Expand Up @@ -418,27 +415,6 @@ return /******/ (function(modules) { // webpackBootstrap
}
},

getNextCursorPosition: function getNextCursorPosition(endPos, oldValue, newValue) {
// If cursor was at the end of value, just place it back.
// Because new value could contain additional chars.
if (oldValue.length === endPos) {
return newValue.length;
}

return endPos;
},

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

this.setState({
updateCursorPosition: false
});

Util.setSelection(owner.element, cursorPosition, pps.document);
},

updateValueState: function updateValueState() {
var owner = this,
pps = owner.properties;
Expand All @@ -451,28 +427,19 @@ return /******/ (function(modules) { // webpackBootstrap
var oldValue = owner.element.value;
var newValue = pps.result;

owner.lastInputValue = pps.result;
owner.lastInputValue = newValue;

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

if (owner.isAndroid) {
window.setTimeout(function () {
owner.setState({
value: newValue,
cursorPosition: endPos,
updateCursorPosition: true
});
owner.setState({ value: newValue, cursorPosition: endPos });
}, 1);

return;
}

owner.setState({
value: newValue,
cursorPosition: endPos,
updateCursorPosition: true
});
owner.setState({ value: newValue, cursorPosition: endPos });
},

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

getNextCursorPosition: function getNextCursorPosition(prevPos, oldValue, newValue, delimiter, delimiters) {
// If cursor was at the end of value, just place it back.
// Because new value could contain additional chars.
if (oldValue.length === prevPos) {
return newValue.length;
}

return prevPos + this.getPositionOffset(prevPos, oldValue, newValue, delimiter, delimiters);
},

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

Expand Down Expand Up @@ -2531,6 +2508,11 @@ return /******/ (function(modules) { // webpackBootstrap
return;
}

// cursor is already in the end
if (element && element.value.length <= position) {
return;
}

if (element.createTextRange) {
var range = element.createTextRange();

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

Large diffs are not rendered by default.

Loading

0 comments on commit eb5f7b2

Please sign in to comment.