{"action":"created","issue":{"url":"https://api.github.com/repos/riot/riot/issues/2314","repository_url":"https://api.github.com/repos/riot/riot","labels_url":"https://api.github.com/repos/riot/riot/issues/2314/labels{/name}","comments_url":"https://api.github.com/repos/riot/riot/issues/2314/comments","events_url":"https://api.github.com/repos/riot/riot/issues/2314/events","html_url":"https://github.com/riot/riot/issues/2314","id":220410538,"number":2314,"title":"Input Value caching, surprising behaviour or by design? ","user":{"login":"davidhewitt","id":1939362,"avatar_url":"https://avatars0.githubusercontent.com/u/1939362?v=3","gravatar_id":"","url":"https://api.github.com/users/davidhewitt","html_url":"https://github.com/davidhewitt","followers_url":"https://api.github.com/users/davidhewitt/followers","following_url":"https://api.github.com/users/davidhewitt/following{/other_user}","gists_url":"https://api.github.com/users/davidhewitt/gists{/gist_id}","starred_url":"https://api.github.com/users/davidhewitt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davidhewitt/subscriptions","organizations_url":"https://api.github.com/users/davidhewitt/orgs","repos_url":"https://api.github.com/users/davidhewitt/repos","events_url":"https://api.github.com/users/davidhewitt/events{/privacy}","received_events_url":"https://api.github.com/users/davidhewitt/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-04-08T16:30:20Z","updated_at":"2017-04-08T16:39:38Z","closed_at":"2017-04-08T16:39:38Z","body":"## Help us to manage our issues by answering the following:\r\n\r\n1. Describe your issue:\r\n\r\nHi there, this is a question about design. I found a corner case which surprised me, which I think is expected behaviour, but I wanted to share.\r\n\r\nI've made a little toy app which has an \"option\" which you can set with one of three buttons. Along with that, you can set a \"value\" by entering it into an input, _but the user must click save_ to update the value in the tag's state.\r\n\r\nI wanted it such that whenever the user changes the option with one of the three buttons, then the value is reset to \"\" and the input element cleared. However, if I do this particular order of operations, then the input doesn't clear:\r\n\r\n  1. Type any text into the input, but don't click save\r\n  2. Now click one of the option buttons.\r\n\r\nExample source of such a tag with this behaviour below. I assume what is going on is that Riot is seeing that `currentValue == \"\"` always because the user doesn't save it, and so on the tag update Riot decides that currentValue hasn't changed and doesn't set the input's value. However, the input's value is not equal to `\"\"` - the user had typed something, and I'd like that text cleared!\r\n\r\nIt's easy enough to solve by adding another variable to track the current text of the input, but I couldn't help but wonder if for input elements Riot should compare not against the last result of currentValue cache but against the `<input>` element's actual value, because the application user can change it outside of Riot by typing something in.\r\n\r\nWhat do you think?\r\n\r\nCheers\r\nDavid.\r\n \r\n    <app>\r\n      <p each={option in options}>\r\n        <button onclick={setOption}>Set to {option}</button>\r\n      </p>\r\n\r\n      <p>Chosen option is {chosenOption}</p>\r\n\r\n      <p>\r\n        Enter a value:\r\n\r\n        <!-- This is the input that I'm talking about. Riot presumably caches the result of currentValue as \"\", so Riot won't empty the input's contents on update, because according to the cache the value hasn't changed. -->\r\n        <input value={currentValue} ref=\"input\"> \r\n\r\n        <button onclick={saveValue}>Save value</button>\r\n      <p>\r\n\r\n      <p>Chosen value is {currentValue}</p>\r\n\r\n      <script>\r\n\r\n        this.options = [\"foo\", \"bar\", \"baz\"];\r\n\r\n        // Initial state.\r\n        this.chosenOption = \"foo\";\r\n        this.currentValue = \"\";\r\n\r\n        // On option changing, record it and reset current value to \"\".\r\n        // Note that \r\n        this.setOption = (e) => {\r\n          this.chosenOption = e.item.option;\r\n          this.currentValue = \"\";\r\n        }\r\n\r\n        this.saveValue = () => {\r\n          this.currentValue = this.refs.input.value;\r\n        }\r\n      </script>\r\n    </app>\r\n\r\n\r\n\r\n2. Can you reproduce the issue?\r\n\r\n  - [plnkr example attached](http://plnkr.co/edit/1f8KoMCtyBAItI1znKQp?p=preview)\r\n\r\n3. On which browser/OS does the issue appear?\r\nn/a\r\n\r\n4. Which version of Riot does it affect?\r\nn/a\r\n\r\n5. How would you tag this issue?\r\n\r\n  - [x] Question\r\n  - [ ] Bug\r\n  - [ ] Discussion\r\n  - [ ] Feature request\r\n  - [ ] Tip\r\n  - [ ] Enhancement\r\n  - [ ] Performance\r\n"},"comment":{"url":"https://api.github.com/repos/riot/riot/issues/comments/292729443","html_url":"https://github.com/riot/riot/issues/2314#issuecomment-292729443","issue_url":"https://api.github.com/repos/riot/riot/issues/2314","id":292729443,"user":{"login":"GianlucaGuarini","id":879612,"avatar_url":"https://avatars1.githubusercontent.com/u/879612?v=3","gravatar_id":"","url":"https://api.github.com/users/GianlucaGuarini","html_url":"https://github.com/GianlucaGuarini","followers_url":"https://api.github.com/users/GianlucaGuarini/followers","following_url":"https://api.github.com/users/GianlucaGuarini/following{/other_user}","gists_url":"https://api.github.com/users/GianlucaGuarini/gists{/gist_id}","starred_url":"https://api.github.com/users/GianlucaGuarini/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/GianlucaGuarini/subscriptions","organizations_url":"https://api.github.com/users/GianlucaGuarini/orgs","repos_url":"https://api.github.com/users/GianlucaGuarini/repos","events_url":"https://api.github.com/users/GianlucaGuarini/events{/privacy}","received_events_url":"https://api.github.com/users/GianlucaGuarini/received_events","type":"User","site_admin":false},"created_at":"2017-04-08T16:39:38Z","updated_at":"2017-04-08T16:39:38Z","body":"Your issue was largely discussed [here](https://github.com/riot/riot/issues/1642) and it's how riot works by design: you bind you input to `currentValue`, then if you type something in your input without saving the new value into `currentValue` riot in the next update will just loop all the expressions updating only the DOM elements bound to expressions that have changed their value. What happens internally is something like:\r\n```js\r\ncurrentValue = ''\r\n// update()\r\nif (currentValue !== oldCurrentValue) {\r\n   updateInputField()\r\n}\r\n\r\n```\r\nI am closing this bug as duplicate but thanks for asking"}}
{"actor":{"display_login":"GianlucaGuarini"}}