From abcd01365f5e5feb8969d98837589665ad211541 Mon Sep 17 00:00:00 2001 From: dgnedoy Date: Wed, 24 Jan 2018 15:28:22 +0200 Subject: [PATCH] fix behavior of the cursor after increment/decrement the value --- __tests__/misc.test.jsx | 23 ++++++++++++++++++++++- dist/react-numeric-input.js | 10 ++++++++-- dist/react-numeric-input.min.js | 2 +- docs/react-numeric-input.js | 10 ++++++++-- index.js | 10 ++++++++-- src/NumericInput.jsx | 8 +++++++- 6 files changed, 54 insertions(+), 9 deletions(-) diff --git a/__tests__/misc.test.jsx b/__tests__/misc.test.jsx index 5884edf..832e3e6 100644 --- a/__tests__/misc.test.jsx +++ b/__tests__/misc.test.jsx @@ -100,7 +100,8 @@ describe ('NumericInput/misc', function() { widget.refsInput.selectionStart = 1 widget.refsInput.selectionEnd = 1 widget.saveSelection() - widget.increase() + widget.refsInput.value = 11 + TestUtils.Simulate.change(widget.refsInput) expect(widget.refsInput.value).toEqual('11%') expect(widget.refsInput.selectionStart).toEqual(1) expect(widget.refsInput.selectionEnd).toEqual(1) @@ -108,6 +109,26 @@ describe ('NumericInput/misc', function() { }) } + /** + * Selection have to be moved to the right after increment/decrement + * the value according to common behavior of html element + */ + it ('persists selection', done => { + let widget = TestUtils.renderIntoDocument( + + ) + expect(widget.refsInput.value).toEqual('9') + TestUtils.Simulate.focus(widget.refsInput) + widget.refsInput.selectionStart = 1 + widget.refsInput.selectionEnd = 1 + widget.saveSelection() + widget.increase() + expect(widget.refsInput.value).toEqual('10') + expect(widget.refsInput.selectionStart).toEqual(2) + expect(widget.refsInput.selectionEnd).toEqual(2) + done() + }) + /** * onChange gets called when input content is deleted * @see https://github.com/vlad-ignatov/react-numeric-input/issues/27 diff --git a/dist/react-numeric-input.js b/dist/react-numeric-input.js index 52df137..7ea58f0 100644 --- a/dist/react-numeric-input.js +++ b/dist/react-numeric-input.js @@ -544,7 +544,13 @@ return /******/ (function(modules) { // webpackBootstrap this._isStrict = _isStrict; if (_n !== this.state.value) { - this.setState({ value: _n, stringValue: _n + "" }, callback); + var _nString = _n + ""; + this.setState({ + value: _n, + stringValue: _nString, + selectionStart: _nString.length, + selectionEnd: _nString.length + }, callback); return true; } @@ -1082,7 +1088,7 @@ return /******/ (function(modules) { // webpackBootstrap value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]), defaultValue: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]), strict: _propTypes2.default.bool, - componentClass: _propTypes2.default.string, + componentClass: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.string]), mobile: function mobile(props, propName) { var prop = props[propName]; if (prop !== true && prop !== false && prop !== 'auto' && typeof prop != 'function') { diff --git a/dist/react-numeric-input.min.js b/dist/react-numeric-input.min.js index f46ffd1..9feef06 100644 --- a/dist/react-numeric-input.min.js +++ b/dist/react-numeric-input.min.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React"),require("PropTypes")):"function"==typeof define&&define.amd?define(["React","PropTypes"],e):"object"==typeof exports?exports.NumericInput=e(require("React"),require("PropTypes")):t.NumericInput=e(t.React,t.PropTypes)}(this,function(t,e){return function(t){function e(o){if(n[o])return n[o].exports;var a=n[o]={exports:{},id:o,loaded:!1};return t[o].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{default:t}}function a(t,e){var n={};for(var o in t)e.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o]);return n}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function u(t,e){return t.classList?t.classList.add(e):void(t.className.search(new RegExp("\\b"+e+"\\b"))||(t.className=" "+e))}function l(t,e){if(t.className){if(t.classList)return t.classList.remove(e);t.className=t.className.replace(new RegExp("\\b"+e+"\\b","g"),"")}}function p(t,e,n){var o=t[e];if("function"==typeof o){for(var a=arguments.length,i=Array(a>3?a-3:0),s=3;sthis.props.maxLength&&(e="This value is too long")),e=e||(t?"":this.refsInput.validationMessage||"Unknown Error");var a=this._valid!==e;this._valid=e,e?(u(this.refsWrapper,"has-error"),a&&this._invokeEventCallback("onInvalid",e,this.state.value,this.refsInput.value)):(l(this.refsWrapper,"has-error"),a&&this._invokeEventCallback("onValid",this.state.value,this.refsInput.value))}},{key:"_toNumber",value:function(t){var n=parseFloat(t);if(!isNaN(n)&&isFinite(n)||(n=0),this._isStrict){var o=p(this.props,"precision",null,this),a=Math.pow(10,null===o?10:o),i=+p(this.props,"min",e.defaultProps.min,this),s=+p(this.props,"max",e.defaultProps.max,this);n=Math.min(Math.max(n,i),s),n=Math.round(n*a)/a}return n}},{key:"_parse",value:function(t){return t=String(t),"function"==typeof this.props.parse?parseFloat(this.props.parse(t)):parseFloat(t)}},{key:"_format",value:function(t){var e=this._toNumber(t),n=p(this.props,"precision",null,this);return null!==n&&(e=t.toFixed(n)),e+="",this.props.format?this.props.format(e):e}},{key:"_step",value:function t(n,o){var a=this._isStrict;this._isStrict=!0;var t=+p(this.props,"step",e.defaultProps.step,this,n>0?e.DIRECTION_UP:e.DIRECTION_DOWN),i=this._toNumber((this.state.value||0)+t*n);return this.props.snap&&(i=Math.round(i/t)*t),this._isStrict=a,i!==this.state.value&&(this.setState({value:i,stringValue:i+""},o),!0)}},{key:"_onKeyDown",value:function(){for(var t=arguments.length,e=Array(t),n=0;n0&&a.length&&"."===a.charAt(this.refsInput.selectionEnd-1)&&(o.preventDefault(),this.refsInput.selectionStart=this.refsInput.selectionEnd=this.refsInput.selectionEnd-1):46===o.keyCode&&this.refsInput.selectionStart==this.refsInput.selectionEnd&&this.refsInput.selectionEnd0&&void 0!==arguments[0]&&arguments[0],o=arguments[1];this.stop(),this._step(1,o);var a=+p(this.props,"max",e.defaultProps.max,this);(isNaN(this.state.value)||+this.state.value0&&void 0!==arguments[0]&&arguments[0],o=arguments[1];this.stop(),this._step(-1,o);var a=+p(this.props,"min",e.defaultProps.min,this);(isNaN(this.state.value)||+this.state.value>a)&&(this._timer=setTimeout(function(){t.decrease(!0)},n?e.SPEED:e.DELAY))}},{key:"onMouseDown",value:function(t,e){"down"==t?this.decrease(!1,e):"up"==t&&this.increase(!1,e)}},{key:"onTouchStart",value:function(t,e){e.preventDefault(),"down"==t?this.decrease():"up"==t&&this.increase()}},{key:"onTouchEnd",value:function(t){t.preventDefault(),this.stop()}},{key:"_invokeEventCallback",value:function(t){if("function"==typeof this.props[t]){for(var e,n=arguments.length,o=Array(n>1?n-1:0),a=1;a=0||Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o]);return n}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function u(t,e){return t.classList?t.classList.add(e):void(t.className.search(new RegExp("\\b"+e+"\\b"))||(t.className=" "+e))}function l(t,e){if(t.className){if(t.classList)return t.classList.remove(e);t.className=t.className.replace(new RegExp("\\b"+e+"\\b","g"),"")}}function p(t,e,n){var o=t[e];if("function"==typeof o){for(var a=arguments.length,i=Array(a>3?a-3:0),s=3;sthis.props.maxLength&&(e="This value is too long")),e=e||(t?"":this.refsInput.validationMessage||"Unknown Error");var a=this._valid!==e;this._valid=e,e?(u(this.refsWrapper,"has-error"),a&&this._invokeEventCallback("onInvalid",e,this.state.value,this.refsInput.value)):(l(this.refsWrapper,"has-error"),a&&this._invokeEventCallback("onValid",this.state.value,this.refsInput.value))}},{key:"_toNumber",value:function(t){var n=parseFloat(t);if(!isNaN(n)&&isFinite(n)||(n=0),this._isStrict){var o=p(this.props,"precision",null,this),a=Math.pow(10,null===o?10:o),i=+p(this.props,"min",e.defaultProps.min,this),s=+p(this.props,"max",e.defaultProps.max,this);n=Math.min(Math.max(n,i),s),n=Math.round(n*a)/a}return n}},{key:"_parse",value:function(t){return t=String(t),"function"==typeof this.props.parse?parseFloat(this.props.parse(t)):parseFloat(t)}},{key:"_format",value:function(t){var e=this._toNumber(t),n=p(this.props,"precision",null,this);return null!==n&&(e=t.toFixed(n)),e+="",this.props.format?this.props.format(e):e}},{key:"_step",value:function t(n,o){var a=this._isStrict;this._isStrict=!0;var t=+p(this.props,"step",e.defaultProps.step,this,n>0?e.DIRECTION_UP:e.DIRECTION_DOWN),i=this._toNumber((this.state.value||0)+t*n);if(this.props.snap&&(i=Math.round(i/t)*t),this._isStrict=a,i!==this.state.value){var s=i+"";return this.setState({value:i,stringValue:s,selectionStart:s.length,selectionEnd:s.length},o),!0}return!1}},{key:"_onKeyDown",value:function(){for(var t=arguments.length,e=Array(t),n=0;n0&&a.length&&"."===a.charAt(this.refsInput.selectionEnd-1)&&(o.preventDefault(),this.refsInput.selectionStart=this.refsInput.selectionEnd=this.refsInput.selectionEnd-1):46===o.keyCode&&this.refsInput.selectionStart==this.refsInput.selectionEnd&&this.refsInput.selectionEnd0&&void 0!==arguments[0]&&arguments[0],o=arguments[1];this.stop(),this._step(1,o);var a=+p(this.props,"max",e.defaultProps.max,this);(isNaN(this.state.value)||+this.state.value0&&void 0!==arguments[0]&&arguments[0],o=arguments[1];this.stop(),this._step(-1,o);var a=+p(this.props,"min",e.defaultProps.min,this);(isNaN(this.state.value)||+this.state.value>a)&&(this._timer=setTimeout(function(){t.decrease(!0)},n?e.SPEED:e.DELAY))}},{key:"onMouseDown",value:function(t,e){"down"==t?this.decrease(!1,e):"up"==t&&this.increase(!1,e)}},{key:"onTouchStart",value:function(t,e){e.preventDefault(),"down"==t?this.decrease():"up"==t&&this.increase()}},{key:"onTouchEnd",value:function(t){t.preventDefault(),this.stop()}},{key:"_invokeEventCallback",value:function(t){if("function"==typeof this.props[t]){for(var e,n=arguments.length,o=Array(n>1?n-1:0),a=1;a