{"action":"closed","issue":{"url":"https://api.github.com/repos/shopgate/pwa/issues/804","repository_url":"https://api.github.com/repos/shopgate/pwa","labels_url":"https://api.github.com/repos/shopgate/pwa/issues/804/labels{/name}","comments_url":"https://api.github.com/repos/shopgate/pwa/issues/804/comments","events_url":"https://api.github.com/repos/shopgate/pwa/issues/804/events","html_url":"https://github.com/shopgate/pwa/issues/804","id":478928539,"node_id":"MDU6SXNzdWU0Nzg5Mjg1Mzk=","number":804,"title":"handleFocusChange handler prevents click event in SEARCH_SUGGESTION_ITEM portal","user":{"login":"DanielRuf","id":827205,"node_id":"MDQ6VXNlcjgyNzIwNQ==","avatar_url":"https://avatars1.githubusercontent.com/u/827205?v=4","gravatar_id":"","url":"https://api.github.com/users/DanielRuf","html_url":"https://github.com/DanielRuf","followers_url":"https://api.github.com/users/DanielRuf/followers","following_url":"https://api.github.com/users/DanielRuf/following{/other_user}","gists_url":"https://api.github.com/users/DanielRuf/gists{/gist_id}","starred_url":"https://api.github.com/users/DanielRuf/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DanielRuf/subscriptions","organizations_url":"https://api.github.com/users/DanielRuf/orgs","repos_url":"https://api.github.com/users/DanielRuf/repos","events_url":"https://api.github.com/users/DanielRuf/events{/privacy}","received_events_url":"https://api.github.com/users/DanielRuf/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2019-08-09T10:59:44Z","updated_at":"2019-08-29T07:52:24Z","closed_at":"2019-08-29T07:52:24Z","author_association":"CONTRIBUTOR","body":"Currently `handleFocusChange` sets `focused` but this leads to the case that the SuggestionList is not rendered. Using `setTimeout` in a component which is rendered in place of the suggestion item with an `onClick` handler does not work - the `onClick` in the rendered portal is never invoked (race condition).\r\n\r\nJust when we set `focused: true` in the `handleFocusChange` it works but this is not a solution (not sure how it should behave).\r\n`\r\nthis.setState({ focused: true });\r\n`\r\n\r\nBut this is not an optimal solution.\r\n\r\nCurrent code of our suggestion item (setTimeout does not help here as it seems, using setTimeout to add something on top of the stack is also rather a hack and never a solution for race conditions as this adds a timer on the timer stack but there might still be race conditions like in this case\r\n):\r\n```\r\n  const onClickCurrent = function(text, e) {\r\n    e.target.value = e.currentTarget.value;\r\n    e.persist();\r\n    setTimeout(() => {\r\n      onClick(e, text);\r\n    }, 0);\r\n  };\r\n\r\n  return (\r\n    <button\r\n        className={styles.item}\r\n        onClick={onClickCurrent.bind(this, text)}\r\n        value={text}\r\n        data-test-id={`searchSuggestion ${text}`}\r\n    >\r\n    ...\r\n    </button>\r\n  )\r\n```\r\n\r\nGenerally it is problemtic because when I do any action which moves the focus out of the input, the list is not rendered anymore. This also affects local testing in Firefox DevTools (rightclick closes it as the input loses the focus then)."}}
{"actor":{"display_login":"alexbridge"}}