{"action":"closed","issue":{"url":"https://api.github.com/repos/necolas/react-native-web/issues/1164","repository_url":"https://api.github.com/repos/necolas/react-native-web","labels_url":"https://api.github.com/repos/necolas/react-native-web/issues/1164/labels{/name}","comments_url":"https://api.github.com/repos/necolas/react-native-web/issues/1164/comments","events_url":"https://api.github.com/repos/necolas/react-native-web/issues/1164/events","html_url":"https://github.com/necolas/react-native-web/issues/1164","id":377487000,"node_id":"MDU6SXNzdWUzNzc0ODcwMDA=","number":1164,"title":"TouchableOpacity triggering <input> and <TextInput>","user":{"login":"bcpugh","id":10272698,"node_id":"MDQ6VXNlcjEwMjcyNjk4","avatar_url":"https://avatars1.githubusercontent.com/u/10272698?v=4","gravatar_id":"","url":"https://api.github.com/users/bcpugh","html_url":"https://github.com/bcpugh","followers_url":"https://api.github.com/users/bcpugh/followers","following_url":"https://api.github.com/users/bcpugh/following{/other_user}","gists_url":"https://api.github.com/users/bcpugh/gists{/gist_id}","starred_url":"https://api.github.com/users/bcpugh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bcpugh/subscriptions","organizations_url":"https://api.github.com/users/bcpugh/orgs","repos_url":"https://api.github.com/users/bcpugh/repos","events_url":"https://api.github.com/users/bcpugh/events{/privacy}","received_events_url":"https://api.github.com/users/bcpugh/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2018-11-05T16:47:31Z","updated_at":"2019-01-03T21:23:08Z","closed_at":"2019-01-03T21:23:08Z","author_association":"NONE","body":"**The problem**\r\nOn safari mobile, TouchableOpacity will trigger another component at the same location when changing views (if second component is an `\"<input>\"` or `\"<TextInput>\"`). \r\n\r\n`<input>` example provided below. Similar behavior for a TextInput at same location; however, unable to reproduce succinctly in sandbox (using Redux Form for this implementation).\r\n\r\n**How to reproduce**\r\nhttps://codesandbox.io/s/6njwzqojnr\r\n(I tried to minimize redux / router code).\r\nIf you load on mobile safari on iPhone and click the upper left of the first component (i.e.TouchableOpacity, blue) it will trigger the second component (i.e. `<input>`, red).\r\n\r\nSteps to reproduce:\r\n1. TouchableOpacity overlapping where <input> in second view, w/ onPress triggers view change\r\n2. User touches TouchableOpacity in the overlapping location\r\n3. <input> gets triggered unintentionally. Longer presses increase frequency of unexpected behavior\r\n\r\n**Expected behavior**\r\nExpected touchstart and touchend events only.\r\n(Using safari devtools hooked up to my iPhone, recorded events are: touchstart, touchend, mouseover, mousemove, mousedown, mouseup, and click (<-- targets the input file).  In my app, the final click gets fired twice, even.\r\n\r\nRNW: 0.9.6\r\nRN: 0.57.4\r\nBrowser: Safari (iOS12, iPhone 7)"}}
{"actor":{"display_login":"necolas"}}