{"action":"created","issue":{"url":"https://api.github.com/repos/okonet/react-dropzone/issues/140","repository_url":"https://api.github.com/repos/okonet/react-dropzone","labels_url":"https://api.github.com/repos/okonet/react-dropzone/issues/140/labels{/name}","comments_url":"https://api.github.com/repos/okonet/react-dropzone/issues/140/comments","events_url":"https://api.github.com/repos/okonet/react-dropzone/issues/140/events","html_url":"https://github.com/okonet/react-dropzone/issues/140","id":134029419,"number":140,"title":"onDragLeave won't call back when react-dropzone has input element as children","user":{"login":"nqbao","id":177742,"avatar_url":"https://avatars.githubusercontent.com/u/177742?v=3","gravatar_id":"","url":"https://api.github.com/users/nqbao","html_url":"https://github.com/nqbao","followers_url":"https://api.github.com/users/nqbao/followers","following_url":"https://api.github.com/users/nqbao/following{/other_user}","gists_url":"https://api.github.com/users/nqbao/gists{/gist_id}","starred_url":"https://api.github.com/users/nqbao/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nqbao/subscriptions","organizations_url":"https://api.github.com/users/nqbao/orgs","repos_url":"https://api.github.com/users/nqbao/repos","events_url":"https://api.github.com/users/nqbao/events{/privacy}","received_events_url":"https://api.github.com/users/nqbao/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2016-02-16T16:37:42Z","updated_at":"2016-03-01T04:24:52Z","closed_at":null,"body":"If i create a dropzone with input element as children, the dragleave callback won't be call correctly.\r\n\r\n```\r\n  <Dropzone disableClick multiple={false}>\r\n       <div><input type='text' /></div>\r\n  </Dropzone>\r\n```\r\n\r\nHere is the screenshot after drag in and dragout a while, the dragleave won't callback anymore\r\n\r\n![input](https://cloud.githubusercontent.com/assets/177742/13083118/3ef1c970-d506-11e5-9c0b-99ecdf7eba28.gif)\r\n"},"comment":{"url":"https://api.github.com/repos/okonet/react-dropzone/issues/comments/190534399","html_url":"https://github.com/okonet/react-dropzone/issues/140#issuecomment-190534399","issue_url":"https://api.github.com/repos/okonet/react-dropzone/issues/140","id":190534399,"user":{"login":"NervosaX","id":1562807,"avatar_url":"https://avatars.githubusercontent.com/u/1562807?v=3","gravatar_id":"","url":"https://api.github.com/users/NervosaX","html_url":"https://github.com/NervosaX","followers_url":"https://api.github.com/users/NervosaX/followers","following_url":"https://api.github.com/users/NervosaX/following{/other_user}","gists_url":"https://api.github.com/users/NervosaX/gists{/gist_id}","starred_url":"https://api.github.com/users/NervosaX/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NervosaX/subscriptions","organizations_url":"https://api.github.com/users/NervosaX/orgs","repos_url":"https://api.github.com/users/NervosaX/repos","events_url":"https://api.github.com/users/NervosaX/events{/privacy}","received_events_url":"https://api.github.com/users/NervosaX/received_events","type":"User","site_admin":false},"created_at":"2016-03-01T04:24:52Z","updated_at":"2016-03-01T04:24:52Z","body":"This works around the issue by just not using the dropzone dragLeave, instead using a wrapper div.\r\n\r\n@nqbao This might help you.\r\n\r\n```javascript\r\n<div onDragLeave={this.handleDragLeave.bind(this)}>\r\n\t<Dropzone\r\n\t\tclassName={classes}\r\n\t\tstyle={{}}\r\n\t\tonDrop={this.handleDrop.bind(this)}\r\n\t\tonDragEnter={this.handleDragEnter.bind(this)}>\r\n\r\n\t\t{this.state.dropEnter ? (\r\n\t\t\t<div>Drop image here</div>\r\n\t\t) : (\r\n\t\t\t<div>\r\n\t\t\t\t<Icon value=\"photo\" />\r\n\t\t\t\t<div>Click to select an image or drag one here</div>\r\n\t\t\t</div>\r\n\t\t)}\r\n\t</Dropzone>\r\n</div>\r\n```"}}