{"action":"opened","issue":{"url":"https://api.github.com/repos/scniro/react-codemirror2/issues/83","repository_url":"https://api.github.com/repos/scniro/react-codemirror2","labels_url":"https://api.github.com/repos/scniro/react-codemirror2/issues/83/labels{/name}","comments_url":"https://api.github.com/repos/scniro/react-codemirror2/issues/83/comments","events_url":"https://api.github.com/repos/scniro/react-codemirror2/issues/83/events","html_url":"https://github.com/scniro/react-codemirror2/issues/83","id":318672174,"number":83,"title":"CodeMirror2 refresh","user":{"login":"dyzajash","id":5177092,"avatar_url":"https://avatars3.githubusercontent.com/u/5177092?v=4","gravatar_id":"","url":"https://api.github.com/users/dyzajash","html_url":"https://github.com/dyzajash","followers_url":"https://api.github.com/users/dyzajash/followers","following_url":"https://api.github.com/users/dyzajash/following{/other_user}","gists_url":"https://api.github.com/users/dyzajash/gists{/gist_id}","starred_url":"https://api.github.com/users/dyzajash/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dyzajash/subscriptions","organizations_url":"https://api.github.com/users/dyzajash/orgs","repos_url":"https://api.github.com/users/dyzajash/repos","events_url":"https://api.github.com/users/dyzajash/events{/privacy}","received_events_url":"https://api.github.com/users/dyzajash/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-04-28T22:08:27Z","updated_at":"2018-04-28T22:08:27Z","closed_at":null,"author_association":"NONE","body":"Hello, \r\n\r\nI'm currently building app based on react-codemirror2 and reactstrap. I have editor component inside Collapse component. Unfortunately with this setup, editor component is always blank until I click on it. \r\n\r\nBased on this issues:\r\nhttps://stackoverflow.com/questions/8349571/codemirror-editor-is-not-loading-content-until-clicked\r\nhttps://stackoverflow.com/questions/10575833/codemirror-has-content-but-wont-display-until-keypress\r\nhttps://stackoverflow.com/questions/5364909/javascript-codemirror-refresh-textarea/5377029#5377029\r\n\r\nI need to call `.refresh()` method on CodeMirror instance. \r\n\r\nI've tried to get the instance with `editorDidMount()` and then calling `this.instance.refresh()` in `componentDidMount()` function, but this not helps. \r\n\r\nCode:\r\n\r\n```js\r\nimport React, { Component }  from 'react';\r\nimport FontAwesomeIcon from '@fortawesome/react-fontawesome'\r\nimport {faTrashAlt} from \"@fortawesome/fontawesome-free-solid/index\";\r\nimport {Button, ButtonGroup, Card, CardBody, Col, Collapse, Container, FormGroup, Label, Row} from \"reactstrap\";\r\nimport {Controlled as CodeMirror} from 'react-codemirror2'\r\nrequire('codemirror/lib/codemirror.css');\r\nrequire('codemirror/mode/javascript/javascript.js');\r\nrequire('codemirror/mode/htmlmixed/htmlmixed.js');\r\n\r\nclass CodeBlock extends Component {\r\n    constructor(props) {\r\n        super(props);\r\n        this.toggle = this.toggle.bind(this);\r\n        this.state = {\r\n            collapse: false,\r\n            value: props.initialValue,\r\n            mode: props.mode\r\n        };\r\n        this.instance = null;\r\n    }\r\n\r\n    toggle() {\r\n        this.setState({ collapse: !this.state.collapse });\r\n    }\r\n\r\n    componentDidMount() {\r\n        // setTimeout(() => {this.instance.refresh()}, 0); // Don't work\r\n        this.instance.refresh();\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className=\"mb-3\">\r\n                <Button color=\"outline-secondary\" onClick={this.toggle} className=\"w-100\">Block {this.state.mode}</Button>\r\n                <Collapse isOpen={this.state.collapse}>\r\n                    <Card>\r\n                        <CardBody>\r\n                            <Container>\r\n                                <Row>\r\n                                    <Col xs=\"2\">\r\n                                        <FormGroup>\r\n                                            <Label>Actions</Label>\r\n                                            <div>\r\n                                                <ButtonGroup>\r\n                                                    <Button className=\"btn\" color=\"danger\"><FontAwesomeIcon icon={faTrashAlt}/></Button>\r\n                                                </ButtonGroup>\r\n                                            </div>\r\n                                        </FormGroup>\r\n                                    </Col>\r\n                                </Row>\r\n                                <Row>\r\n                                    <Col>\r\n                                        <CodeMirror\r\n                                            value={this.state.value}\r\n                                            options={{\r\n                                                mode: this.state.mode,\r\n                                                lineNumbers: true,\r\n                                                autoRefresh:true\r\n                                            }}\r\n                                            editorDidMount={editor => { this.instance = editor }}\r\n                                            onBeforeChange={(editor, data, value) => {\r\n                                                this.setState({value});\r\n                                            }}\r\n                                            onChange={(editor, data, value) => {\r\n                                            }}\r\n                                        />\r\n                                    </Col>\r\n                                </Row>\r\n                            </Container>\r\n                        </CardBody>\r\n                    </Card>\r\n                </Collapse>\r\n            </div>\r\n        )\r\n    }\r\n}\r\n\r\nexport default CodeBlock;\r\n```"}}
{"actor":{"display_login":"dyzajash"}}