{"action":"created","issue":{"url":"https://api.github.com/repos/callemall/material-ui/issues/3618","repository_url":"https://api.github.com/repos/callemall/material-ui","labels_url":"https://api.github.com/repos/callemall/material-ui/issues/3618/labels{/name}","comments_url":"https://api.github.com/repos/callemall/material-ui/issues/3618/comments","events_url":"https://api.github.com/repos/callemall/material-ui/issues/3618/events","html_url":"https://github.com/callemall/material-ui/issues/3618","id":138948098,"number":3618,"title":"[Dialog] Adding a hook to run a function when dialog is shown to the user (feature request)","user":{"login":"adrianmcli","id":943555,"avatar_url":"https://avatars.githubusercontent.com/u/943555?v=3","gravatar_id":"","url":"https://api.github.com/users/adrianmcli","html_url":"https://github.com/adrianmcli","followers_url":"https://api.github.com/users/adrianmcli/followers","following_url":"https://api.github.com/users/adrianmcli/following{/other_user}","gists_url":"https://api.github.com/users/adrianmcli/gists{/gist_id}","starred_url":"https://api.github.com/users/adrianmcli/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adrianmcli/subscriptions","organizations_url":"https://api.github.com/users/adrianmcli/orgs","repos_url":"https://api.github.com/users/adrianmcli/repos","events_url":"https://api.github.com/users/adrianmcli/events{/privacy}","received_events_url":"https://api.github.com/users/adrianmcli/received_events","type":"User","site_admin":false},"labels":[{"id":226508813,"url":"https://api.github.com/repos/callemall/material-ui/labels/New%20Feature","name":"New Feature","color":"c7def8","default":false}],"state":"closed","locked":false,"assignee":{"login":"nathanmarks","id":4420103,"avatar_url":"https://avatars.githubusercontent.com/u/4420103?v=3","gravatar_id":"","url":"https://api.github.com/users/nathanmarks","html_url":"https://github.com/nathanmarks","followers_url":"https://api.github.com/users/nathanmarks/followers","following_url":"https://api.github.com/users/nathanmarks/following{/other_user}","gists_url":"https://api.github.com/users/nathanmarks/gists{/gist_id}","starred_url":"https://api.github.com/users/nathanmarks/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nathanmarks/subscriptions","organizations_url":"https://api.github.com/users/nathanmarks/orgs","repos_url":"https://api.github.com/users/nathanmarks/repos","events_url":"https://api.github.com/users/nathanmarks/events{/privacy}","received_events_url":"https://api.github.com/users/nathanmarks/received_events","type":"User","site_admin":false},"assignees":[{"login":"nathanmarks","id":4420103,"avatar_url":"https://avatars.githubusercontent.com/u/4420103?v=3","gravatar_id":"","url":"https://api.github.com/users/nathanmarks","html_url":"https://github.com/nathanmarks","followers_url":"https://api.github.com/users/nathanmarks/followers","following_url":"https://api.github.com/users/nathanmarks/following{/other_user}","gists_url":"https://api.github.com/users/nathanmarks/gists{/gist_id}","starred_url":"https://api.github.com/users/nathanmarks/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nathanmarks/subscriptions","organizations_url":"https://api.github.com/users/nathanmarks/orgs","repos_url":"https://api.github.com/users/nathanmarks/repos","events_url":"https://api.github.com/users/nathanmarks/events{/privacy}","received_events_url":"https://api.github.com/users/nathanmarks/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/callemall/material-ui/milestones/14","html_url":"https://github.com/callemall/material-ui/milestones/next","labels_url":"https://api.github.com/repos/callemall/material-ui/milestones/14/labels","id":1582007,"number":14,"title":"next","description":"","creator":{"login":"alitaheri","id":8528759,"avatar_url":"https://avatars.githubusercontent.com/u/8528759?v=3","gravatar_id":"","url":"https://api.github.com/users/alitaheri","html_url":"https://github.com/alitaheri","followers_url":"https://api.github.com/users/alitaheri/followers","following_url":"https://api.github.com/users/alitaheri/following{/other_user}","gists_url":"https://api.github.com/users/alitaheri/gists{/gist_id}","starred_url":"https://api.github.com/users/alitaheri/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alitaheri/subscriptions","organizations_url":"https://api.github.com/users/alitaheri/orgs","repos_url":"https://api.github.com/users/alitaheri/repos","events_url":"https://api.github.com/users/alitaheri/events{/privacy}","received_events_url":"https://api.github.com/users/alitaheri/received_events","type":"User","site_admin":false},"open_issues":37,"closed_issues":35,"state":"open","created_at":"2016-02-14T16:34:47Z","updated_at":"2016-10-04T19:53:28Z","due_on":null,"closed_at":null},"comments":36,"created_at":"2016-03-07T10:45:17Z","updated_at":"2016-11-29T19:54:29Z","closed_at":"2016-07-23T02:37:59Z","body":"**This is a feature request** discussion. The dialog component is supposed to be \"focused on a specific task\" as mentioned in the official material design spec [here](https://www.google.com/design/spec/components/dialogs.html#).\n\nAs a result, it makes sense to be able to set focus to certain elements or trigger some kind of Javascript the moment the dialog is shown to the user.\n\nThis is the material-ui component under discussion: https://www.google.com/design/spec/components/dialogs.html\n# The Problem\n\nIf your dialog contains a text field where the user is expected to enter in some text, it only makes logical sense to be able to set focus to that text field when the dialog is shown. However, as of now, there is no easy way to do this. There is no hook for when the modal is shown because the modal is shown whenever the `open` prop receives a `true` value.\n# Potential Solutions\n\nAs an initial foray into this problem, I have evaluated two possible solutions: namely being able to call a function when the component is mounted and detecting state change to see when the modal dialog is shown. Both methods assume that we are going to have an `onDialogShown` prop that will receive a function to be run whenever the dialog is shown to the user. The first method does not work, but the second one seems promising.\n## Component Mounting\n\nInitially, my naive approach was to call the `this.props.onDialogShown` inside the `componentDidMount()` lifecycle function, but I quickly realized that this wouldn't work because the `Dialog` component is mounted long before the actual dialog is shown to the user. As a result, by the time the dialog is actually shown to the user, `componentDidMount()` would have been run a long long time ago.\n\nThis method would not work unless the actual rendering of the dialog was a component in and of itself that we could control.\n## Prop Change Detection\n\nSince the dialog is displayed whenever the `open` prop being passed in evaluates to `true`, my second idea was that we can try to detect when the `open` prop goes from `false` to `true`. This will involve looking at the `componentDidUpdate()` life cycle function and essentially making it look something like this:\n\n``` js\ncomponentDidUpdate(prevProps, prevState) {\n  if (!prevProps.open && this.props.open) {\n    this.props.onDialogShown();\n  }\n}\n```\n\nBefore forking and making a full pull-request though, I would like to ask the community whether or not this is the best way forward. Thoughts?\n"},"comment":{"url":"https://api.github.com/repos/callemall/material-ui/issues/comments/263680002","html_url":"https://github.com/callemall/material-ui/issues/3618#issuecomment-263680002","issue_url":"https://api.github.com/repos/callemall/material-ui/issues/3618","id":263680002,"user":{"login":"oliviertassinari","id":3165635,"avatar_url":"https://avatars.githubusercontent.com/u/3165635?v=3","gravatar_id":"","url":"https://api.github.com/users/oliviertassinari","html_url":"https://github.com/oliviertassinari","followers_url":"https://api.github.com/users/oliviertassinari/followers","following_url":"https://api.github.com/users/oliviertassinari/following{/other_user}","gists_url":"https://api.github.com/users/oliviertassinari/gists{/gist_id}","starred_url":"https://api.github.com/users/oliviertassinari/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oliviertassinari/subscriptions","organizations_url":"https://api.github.com/users/oliviertassinari/orgs","repos_url":"https://api.github.com/users/oliviertassinari/repos","events_url":"https://api.github.com/users/oliviertassinari/events{/privacy}","received_events_url":"https://api.github.com/users/oliviertassinari/received_events","type":"User","site_admin":false},"created_at":"2016-11-29T19:54:29Z","updated_at":"2016-11-29T19:54:29Z","body":"@usergit Those new hooks will be released with the `next` branch. We don't have any ETA.\r\nWe are working on it, component per component."}}
{"actor":{"display_login":"oliviertassinari"}}