Browser scroll does not reset

[harryjoy]

Steps to reproduce:

1. Open a modal dialog with bunch of data (enough data to get scroll in browser)
2. scroll browser to bottom
3. click outside of popup
4. once again open popup
5. popup opens up with scrolling at bottom and header is not visible

The Same thing can be viewed in demo page (http://minhtranite.github.io/react-modal-bootstrap/) with smaller browser height.

Can we change anything to make sure everytime modal dialog is opened, it should scroll to the top and the modal header is visible at first.

[divagant-martian]

I think the problem is that the content of the modal is not re-rendered, just hidden. I have the same problem with some checkboxs.. after the modal is closed, opened a second time the values selected are still there. Any idea on how to force to render again on open?

[bjb118]

Right now whenever my modal closes, it scrolls all the way left and does not return to the original div that called it. Ive tried every api callback and every react lifecycle method, and nothing works. However, if i use scrollIntoView in the terminal, it works just fine.

Steps to Reproduce:

1. Go to http://www.arabisraeliconflictmadesimple.com/timeline
2. press options, UN
3. scroll right to 1967
4. press on "UN security resolution 242"
5. Notice that we are back to 1947

Here's my component that calls the modals

import React, {Component} from 'react'
import $ from 'jquery'
import Modal from 'react-responsive-modal'

class InfoSquare extends Component {
	constructor(props) {
		super(props)
		this.state = {
		    open: false,
		  };
	}

	onOpenModal() {
		if (this.props.modal_info)
			this.setState({ open: true });
	}

	scrollBack() {
		let to_return = document.getElementById(`${this.props.year}`)
		to_return.scrollIntoView();
	}

	onCloseModal() {
		this.setState({ open: false });
	}

	render(props) {
		const { open } = this.state;
		return (
			<div>
      			<p className={`${this.props.indicator}-text`} onClick={this.onOpenModal.bind(this)} >{this.props.text}</p>   			
      			<Modal open={open} onClose={this.onCloseModal.bind(this)} onAfterOpen={this.scrollBack} little>
      				<h4>{this.props.text}</h4>
		        	{this.props.modal_info && 
		          		this.props.modal_info.map(info => <p key={info}>{info}</p>)
		          	}
		        </Modal>
      		</div>
		);
	}
}

export default InfoSquare;