{"action":"created","issue":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/1766","repository_url":"https://api.github.com/repos/styled-components/styled-components","labels_url":"https://api.github.com/repos/styled-components/styled-components/issues/1766/labels{/name}","comments_url":"https://api.github.com/repos/styled-components/styled-components/issues/1766/comments","events_url":"https://api.github.com/repos/styled-components/styled-components/issues/1766/events","html_url":"https://github.com/styled-components/styled-components/issues/1766","id":327435836,"number":1766,"title":"`onClick` when declared in `.attrs({})` is invoked prematurely","user":{"login":"garrettmaring","id":8270120,"avatar_url":"https://avatars1.githubusercontent.com/u/8270120?v=4","gravatar_id":"","url":"https://api.github.com/users/garrettmaring","html_url":"https://github.com/garrettmaring","followers_url":"https://api.github.com/users/garrettmaring/followers","following_url":"https://api.github.com/users/garrettmaring/following{/other_user}","gists_url":"https://api.github.com/users/garrettmaring/gists{/gist_id}","starred_url":"https://api.github.com/users/garrettmaring/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/garrettmaring/subscriptions","organizations_url":"https://api.github.com/users/garrettmaring/orgs","repos_url":"https://api.github.com/users/garrettmaring/repos","events_url":"https://api.github.com/users/garrettmaring/events{/privacy}","received_events_url":"https://api.github.com/users/garrettmaring/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-05-29T18:26:53Z","updated_at":"2018-05-30T16:10:36Z","closed_at":null,"author_association":"NONE","body":"## Environment\r\n\r\n```\r\n## System:\r\n - OS: macOS High Sierra 10.13.4\r\n - CPU: x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz\r\n - Free Memory: 583.71 MB\r\n - Total Memory: 16.00 GB\r\n - Shell: /bin/zsh - 5.3\r\n## Binaries:\r\n - Node: 8.9.4\r\n - Yarn: 1.6.0\r\n - npm: 5.6.0\r\n - Watchman: Not Found\r\n## npmPackages:\r\n### styled-components:\r\n - wanted: ^3.2.6\r\n - installed: 3.3.0\r\n```\r\n\r\n## Reproduction\r\n\r\nSetting `onClick` via `attrs` doesn't work as expected.\r\n\r\n## Steps to reproduce\r\n\r\n```typescript\r\n// ./PreviousArrow.tsx\r\nconst StyledPreviousArrow = styled(Icon).attrs({\r\n  onClick: this.props.navigationFunction.bind(null, this.props.activeSlide - 1),\r\n  type: IconType.LeftArrow,\r\n})`\r\n  ${absolutelyCenter(Direction.Vertical)};\r\n  left: 0;\r\n  z-index: 2;\r\n  padding: 0 11px;\r\n\r\n  width: 22px;\r\n  height: 34px;\r\n`;\r\n\r\n// ./Icon.tsx\r\nclass Icon extends React.Component<IIconProps, {}> {\r\n  public render() {\r\n    return (\r\n      <img className={this.props.className} src={this.props.type} onClick={this.props.onClick} />\r\n    );\r\n  }\r\n}\r\n\r\nexport default styled(Icon)`\r\n  width: 24px;\r\n  height: 24px;\r\n`;\r\n```\r\n\r\n## Expected Behavior\r\n\r\nThe bound `this.props.navigationFunction` is set to the `<img>` tag's `onClick` attribute which is only called when the element is clicked.\r\n \r\n## Actual Behavior\r\n\r\n![screen shot 2018-05-29 at 11 18 49 am](https://user-images.githubusercontent.com/8270120/40677457-90639b3c-6332-11e8-9d18-2dcf4c1c88e1.png)\r\n\r\nThe actual behavior is that the `onClick` function is being called repeatedly. If the contents of the `onClick` function is updated to contain a simple `console.log`, that is called repeatedly until there is an overflow.\r\n\r\nThe workaround was simple. Since `onClick` seems to be called by styled-components when it should be set, I can wrap the bound function in a function that will return it. However, this is obviously not the intended behavior.\r\n\r\n```typescript\r\n// ./PreviousArrow.tsx\r\nconst StyledPreviousArrow = styled(Icon).attrs({\r\n  onClick: () => this.props.navigationFunction.bind(null, this.props.activeSlide - 1),\r\n  type: IconType.LeftArrow,\r\n})`\r\n  ${absolutelyCenter(Direction.Vertical)};\r\n  left: 0;\r\n  z-index: 2;\r\n  padding: 0 11px;\r\n\r\n  width: 22px;\r\n  height: 34px;\r\n`;\r\n```"},"comment":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/comments/393220980","html_url":"https://github.com/styled-components/styled-components/issues/1766#issuecomment-393220980","issue_url":"https://api.github.com/repos/styled-components/styled-components/issues/1766","id":393220980,"user":{"login":"garrettmaring","id":8270120,"avatar_url":"https://avatars1.githubusercontent.com/u/8270120?v=4","gravatar_id":"","url":"https://api.github.com/users/garrettmaring","html_url":"https://github.com/garrettmaring","followers_url":"https://api.github.com/users/garrettmaring/followers","following_url":"https://api.github.com/users/garrettmaring/following{/other_user}","gists_url":"https://api.github.com/users/garrettmaring/gists{/gist_id}","starred_url":"https://api.github.com/users/garrettmaring/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/garrettmaring/subscriptions","organizations_url":"https://api.github.com/users/garrettmaring/orgs","repos_url":"https://api.github.com/users/garrettmaring/repos","events_url":"https://api.github.com/users/garrettmaring/events{/privacy}","received_events_url":"https://api.github.com/users/garrettmaring/received_events","type":"User","site_admin":false},"created_at":"2018-05-30T16:10:36Z","updated_at":"2018-05-30T16:10:36Z","author_association":"NONE","body":"Ah, why so?\r\n\r\nAnd what do you mean where? If you see above, it's defined in its own component file. I removed the export/imports to simplify the example."}}
{"actor":{"display_login":"garrettmaring"}}