{"action":"opened","issue":{"url":"https://api.github.com/repos/uikit/uikit/issues/2123","repository_url":"https://api.github.com/repos/uikit/uikit","labels_url":"https://api.github.com/repos/uikit/uikit/issues/2123/labels{/name}","comments_url":"https://api.github.com/repos/uikit/uikit/issues/2123/comments","events_url":"https://api.github.com/repos/uikit/uikit/issues/2123/events","html_url":"https://github.com/uikit/uikit/issues/2123","id":187164538,"number":2123,"title":"Calling hide then show with multiple modals","user":{"login":"Steiny69","id":4659562,"avatar_url":"https://avatars.githubusercontent.com/u/4659562?v=3","gravatar_id":"","url":"https://api.github.com/users/Steiny69","html_url":"https://github.com/Steiny69","followers_url":"https://api.github.com/users/Steiny69/followers","following_url":"https://api.github.com/users/Steiny69/following{/other_user}","gists_url":"https://api.github.com/users/Steiny69/gists{/gist_id}","starred_url":"https://api.github.com/users/Steiny69/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Steiny69/subscriptions","organizations_url":"https://api.github.com/users/Steiny69/orgs","repos_url":"https://api.github.com/users/Steiny69/repos","events_url":"https://api.github.com/users/Steiny69/events{/privacy}","received_events_url":"https://api.github.com/users/Steiny69/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-11-03T19:17:35Z","updated_at":"2016-11-03T19:17:35Z","closed_at":null,"body":"**TLDR;** Calling hide and then show when there are two modas hides them both. Calling show needs to remove any registered events or the event listener needs additional logic to prevent this.\r\n\r\nI am using UIkit with React JS and found it a little tricky to use a component's state to show or hide a modal dialog. In case you're not familiar with React JS the idea here is that there is a JS object which maintains it's own state that is then accessed in a render function. The render function would then generate the DOM elements to be displayed. For example:\r\n```\r\nrender() {\r\n  let styles = this.state.isOpen ? \" uk-open\" : \"\";\r\n  return <div className={\"uk-modal\" + styles}>\r\n     ...\r\n  </div>;\r\n}\r\n```\r\nOf course this doesn't work since just setting the style is not sufficient. The workaround was to hook into other parts of the lifecycle although it is still a little ugly (and possibly has race conditions - TBC). It ends up looking something like:\r\n```\r\n  componentDidMount() {\r\n    this.displayModal();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.displayModal();\r\n  }\r\n\r\n  displayModal() {\r\n    let modal = UIkit.modal(\"#my-modal\");\r\n    if (this.props.open) {\r\n      modal.show();\r\n    } else {\r\n      modal.hide();\r\n    }\r\n  }\r\n```\r\nThis works ok until there is another modal on the page. What happens then is that `hide` is called on this modal, call it modalA, which registers the transition end event listener. When the state of this component changes to be open it will call `show` which of course hides the current modal, call it modalB, and then shows modalA. However once modalB finishes its transition it triggers both callbacks and both modalA and modalB are hidden."}}
{"actor":{"display_login":"Steiny69"}}