{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/955","labels_url":"https://api.github.com/repos/facebook/react/issues/955/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/955/comments","events_url":"https://api.github.com/repos/facebook/react/issues/955/events","html_url":"https://github.com/facebook/react/issues/955","id":26150428,"number":955,"title":"Cursor jumps to end of controlled input","user":{"login":"ericvicenti","id":1483597,"avatar_url":"https://avatars.githubusercontent.com/u/1483597?v=3","gravatar_id":"","url":"https://api.github.com/users/ericvicenti","html_url":"https://github.com/ericvicenti","followers_url":"https://api.github.com/users/ericvicenti/followers","following_url":"https://api.github.com/users/ericvicenti/following{/other_user}","gists_url":"https://api.github.com/users/ericvicenti/gists{/gist_id}","starred_url":"https://api.github.com/users/ericvicenti/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ericvicenti/subscriptions","organizations_url":"https://api.github.com/users/ericvicenti/orgs","repos_url":"https://api.github.com/users/ericvicenti/repos","events_url":"https://api.github.com/users/ericvicenti/events{/privacy}","received_events_url":"https://api.github.com/users/ericvicenti/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/facebook/react/labels/Resolution:%20Invalid","name":"Resolution: Invalid","color":"e6e6e6"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":14,"created_at":"2014-01-23T08:12:27Z","updated_at":"2015-12-01T03:37:59Z","closed_at":null,"body":"When an input element is \"controlled\" by a model, the cursor will jump to the end of the line on every change. This makes it impossible to edit text that is not at the end of the input.\r\n\r\nA quick demo: https://gist.github.com/ericvicenti/46f97f47c1cfe46040c8\r\n\r\n```\r\n      var ExampleApplication = React.createClass({\r\n        render: function() {\r\n          var model = this.props.model;\r\n          return <input onChange={this.nameChange} value={model.name} />;\r\n        },\r\n        nameChange: function(evt) {\r\n          this.props.model.name = evt.target.value;\r\n        }\r\n      });\r\n      var myModel = {\r\n        name: 'Input is funky'\r\n      };\r\n      setInterval(function() {\r\n        React.renderComponent(\r\n          <ExampleApplication model={myModel} />,\r\n          document.getElementById('container')\r\n        );\r\n      }, 50);\r\n```\r\n\r\nIt should be noted that this is only when using an external model, not when using the view's state. Maybe there is something wrong with my usage here?\r\n\r\nAs a suggested fix, maybe the input should not be overridden unless the value differs? Otherwise, the cursor position should be manually preserved.\r\n\r\nAlso, see this SO entry which documents the ability to grab and preserve the cursor position: http://stackoverflow.com/questions/1080532/prevent-default-behavior-in-text-input-while-pressing-arrow-up"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/160842837","html_url":"https://github.com/facebook/react/issues/955#issuecomment-160842837","issue_url":"https://api.github.com/repos/facebook/react/issues/955","id":160842837,"user":{"login":"spicyj","id":6820,"avatar_url":"https://avatars.githubusercontent.com/u/6820?v=3","gravatar_id":"","url":"https://api.github.com/users/spicyj","html_url":"https://github.com/spicyj","followers_url":"https://api.github.com/users/spicyj/followers","following_url":"https://api.github.com/users/spicyj/following{/other_user}","gists_url":"https://api.github.com/users/spicyj/gists{/gist_id}","starred_url":"https://api.github.com/users/spicyj/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/spicyj/subscriptions","organizations_url":"https://api.github.com/users/spicyj/orgs","repos_url":"https://api.github.com/users/spicyj/repos","events_url":"https://api.github.com/users/spicyj/events{/privacy}","received_events_url":"https://api.github.com/users/spicyj/received_events","type":"User","site_admin":false},"created_at":"2015-12-01T03:37:59Z","updated_at":"2015-12-01T03:37:59Z","body":"@tsheaff That's a good opportunity for a third-party plugin but we won't put it in the core. Maybe a \"React mask component\". :)"}}