{"action":"opened","issue":{"url":"https://api.github.com/repos/cyclejs/cycle-dom/issues/55","labels_url":"https://api.github.com/repos/cyclejs/cycle-dom/issues/55/labels{/name}","comments_url":"https://api.github.com/repos/cyclejs/cycle-dom/issues/55/comments","events_url":"https://api.github.com/repos/cyclejs/cycle-dom/issues/55/events","html_url":"https://github.com/cyclejs/cycle-dom/issues/55","id":112252624,"number":55,"title":"DOM events should emit values at time of the event?","user":{"login":"YourDeveloperFriend","id":1808286,"avatar_url":"https://avatars.githubusercontent.com/u/1808286?v=3","gravatar_id":"","url":"https://api.github.com/users/YourDeveloperFriend","html_url":"https://github.com/YourDeveloperFriend","followers_url":"https://api.github.com/users/YourDeveloperFriend/followers","following_url":"https://api.github.com/users/YourDeveloperFriend/following{/other_user}","gists_url":"https://api.github.com/users/YourDeveloperFriend/gists{/gist_id}","starred_url":"https://api.github.com/users/YourDeveloperFriend/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/YourDeveloperFriend/subscriptions","organizations_url":"https://api.github.com/users/YourDeveloperFriend/orgs","repos_url":"https://api.github.com/users/YourDeveloperFriend/repos","events_url":"https://api.github.com/users/YourDeveloperFriend/events{/privacy}","received_events_url":"https://api.github.com/users/YourDeveloperFriend/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-10-19T23:21:23Z","updated_at":"2015-10-19T23:21:23Z","closed_at":null,"body":"I'm not entirely sure this is a bug, but it was something that had me really confused. You can check out a working js fiddle [here](https://jsfiddle.net/nu68we9h/1/). I have a simple component with a simple enter press action which triggers with the value of the input and only if the value isn't empty:\r\n\r\n```javascript\r\n    var DOM = requests.DOM;\r\n    var keyPress$ = DOM.select('.input').events('keypress');\r\n    var enterPress$ = keyPress$\r\n      .filter(ev => ev.keyCode === 13)\r\n      .map(ev => ev.target.value)\r\n      .filter(_.identity);\r\n```\r\n\r\nI listen to that event to clear the input on enter press:\r\n\r\n```javascript\r\n    var model$ = enterPress$.startWith('');\r\n    var view$ = model$.map(function() {\r\n        return h('input.input', {\r\n          attributes: {\r\n            placeholder: safe ? 'Enter Press Here Triggers' :\r\n              'Enter Press Here Doesn\\'t Trigger',\r\n          },\r\n          value: '',\r\n          autofocus: true,\r\n        })\r\n      });\r\n\r\n```\r\n\r\nI also pass it up to the parent component. The only problem is that the input is being emptied before the value gets emitted to the parent component. So the flow goes like this:\r\n\r\n1) Enter gets pressed with the value 'Test'.\r\n2) The keyPress$ observable gets emitted with the event value.\r\n3) The enterPress$ observable gets emitted with the value 'Test'\r\n4) The input gets rendered with an empty value\r\n5) The keyPress$ observable gets emitted with the event value (which now has an empty value)\r\n6) The enterPress$ observable doesn't emit to the parent component, because now the value's empty.\r\n\r\nI think this has something to do with hot/cold observables, but I would have thought that the enterPress$ observable would only emit once with the value 'Test', and any subscriptions would run based off that value. Why is enterPress$ making the check twice?\r\n\r\nAnother Note: I was able to overcome this by putting in a delay on the model$ so that the parent component ran before the input got re-rendered."}}