{"action":"created","issue":{"url":"https://api.github.com/repos/react-mdl/react-mdl/issues/429","repository_url":"https://api.github.com/repos/react-mdl/react-mdl","labels_url":"https://api.github.com/repos/react-mdl/react-mdl/issues/429/labels{/name}","comments_url":"https://api.github.com/repos/react-mdl/react-mdl/issues/429/comments","events_url":"https://api.github.com/repos/react-mdl/react-mdl/issues/429/events","html_url":"https://github.com/react-mdl/react-mdl/issues/429","id":188628919,"number":429,"title":"MenuItems not hiding menu after onClick event","user":{"login":"marceux","id":3681901,"avatar_url":"https://avatars.githubusercontent.com/u/3681901?v=3","gravatar_id":"","url":"https://api.github.com/users/marceux","html_url":"https://github.com/marceux","followers_url":"https://api.github.com/users/marceux/followers","following_url":"https://api.github.com/users/marceux/following{/other_user}","gists_url":"https://api.github.com/users/marceux/gists{/gist_id}","starred_url":"https://api.github.com/users/marceux/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/marceux/subscriptions","organizations_url":"https://api.github.com/users/marceux/orgs","repos_url":"https://api.github.com/users/marceux/repos","events_url":"https://api.github.com/users/marceux/events{/privacy}","received_events_url":"https://api.github.com/users/marceux/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-11-10T21:54:50Z","updated_at":"2016-11-17T21:49:07Z","closed_at":null,"body":"In a project I'm working on, the `MenuItem` component `onClick` behavior is inconsistent. Sometimes it hides the parent `Menu` and other times it leaves the `Menu` open.\r\n\r\nThe following `MenuItem` implementation closes the parent `Menu` when the `MenuItem` is clicked.\r\n\r\n```javascript\r\nfunction foo(x) {\r\n  // code\r\n}\r\n\r\n// dispatch comes from our react-redux implementation\r\nconst bar => (x) = dispatch(foo(x));\r\n\r\nreturn (\r\n  <Menu target=\"data-table-page-selector\" align=\"right\">\r\n    <MenuItem onClick={() => bar(10)}>10</MenuItem>\r\n    <MenuItem onClick={() => bar(25)}>25</MenuItem>\r\n    <MenuItem onClick={() => bar(50)}>50</MenuItem>\r\n    <MenuItem onClick={() => bar(-1)}>All</MenuItem>\r\n  </Menu>\r\n);\r\n```\r\n\r\nThe next example DOES NOT close the parent `Menu` component when used.\r\n\r\n```javascript\r\nselectOption(option) {\r\n  this.setState({\r\n    option,\r\n  });\r\n}\r\n\r\nrenderOption(option) {\r\n  return (\r\n    <MenuItem onClick={() => this.selectOption(option)}>{option.label}</MenuItem>\r\n  );\r\n}\r\n\r\nrender() {\r\n  return (\r\n    <Menu>\r\n      {this.props.options.map(renderOption)}\r\n    </Menu>\r\n  );\r\n}\r\n```\r\n\r\nI started browsing over the event handlers assigned to the `li.mdl-menu__item` element, and it appears that some file called, `emptyFunction.js` from the `fbjs` library assigns an empty function to the `onClick` handler. Why?"},"comment":{"url":"https://api.github.com/repos/react-mdl/react-mdl/issues/comments/261380524","html_url":"https://github.com/react-mdl/react-mdl/issues/429#issuecomment-261380524","issue_url":"https://api.github.com/repos/react-mdl/react-mdl/issues/429","id":261380524,"user":{"login":"marceux","id":3681901,"avatar_url":"https://avatars.githubusercontent.com/u/3681901?v=3","gravatar_id":"","url":"https://api.github.com/users/marceux","html_url":"https://github.com/marceux","followers_url":"https://api.github.com/users/marceux/followers","following_url":"https://api.github.com/users/marceux/following{/other_user}","gists_url":"https://api.github.com/users/marceux/gists{/gist_id}","starred_url":"https://api.github.com/users/marceux/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/marceux/subscriptions","organizations_url":"https://api.github.com/users/marceux/orgs","repos_url":"https://api.github.com/users/marceux/repos","events_url":"https://api.github.com/users/marceux/events{/privacy}","received_events_url":"https://api.github.com/users/marceux/received_events","type":"User","site_admin":false},"created_at":"2016-11-17T21:49:07Z","updated_at":"2016-11-17T21:49:07Z","body":"Thanks @DirtyHairy \r\n\r\nI don't mind looking around and seeing if I can hack at a PR too, but I was wondering if you knew of any literature/blogs/anything where I can read up more on the matter.\r\n\r\nHere are the topics I'm interested in:\r\n\r\n- changing key prop to force react to unmount and recreate a component\r\n- how/why `.map` to render goes around an external library targeting and setting handlers\r\n\r\nCheers :beer:"}}
{"actor":{"display_login":"marceux"}}