Split pane scrolling is FINALLY working

client/homebrew/splitPane/splitPane.jsx

@@ -3,15 +3,13 @@ var _ = require('lodash');
 var cx = require('classnames');
 
 var SplitPane = React.createClass({
-
 	getInitialState: function() {
 		return {
-			storageKey : 'naturalcrit-pane-split-test',
+			storageKey : 'naturalcrit-pane-split',
 			size : null,
 			isDragging : false
 		};
 	},
-
 	componentDidMount: function() {
 		var paneSize = window.localStorage.getItem(this.props.storageKey);
 		if(paneSize){
@@ -22,10 +20,11 @@ var SplitPane = React.createClass({
 	},
 
 	handleUp : function(){
-		this.setState({ isDragging : false })
+		this.setState({ isDragging : false });
 	},
 	handleDown : function(){
-		this.setState({ isDragging : true })
+		this.setState({ isDragging : true });
+		this.unFocus()
 	},
 	handleMove : function(e){
 		if(!this.state.isDragging) return;
@@ -35,6 +34,14 @@ var SplitPane = React.createClass({
 		window.localStorage.setItem(this.props.storageKey, e.pageX);
 	},
 
+	unFocus : function() {
+		if(document.selection){
+				document.selection.empty();
+		}else{
+			window.getSelection().removeAllRanges();
+		}
+	},
+
 	renderDivider : function(){
 		return <div
 			className='divider'
@@ -44,9 +51,9 @@ var SplitPane = React.createClass({
 
 	render : function(){
 		return <div className='splitPane' onMouseMove={this.handleMove} onMouseUp={this.handleUp}>
-			<Pane width={this.state.size}>{this.props.children[0]}</Pane>
+			<Pane ref='pane1' width={this.state.size}>{this.props.children[0]}</Pane>
 			{this.renderDivider()}
-			<Pane>{this.props.children[1]}</Pane>
+			<Pane ref='pane2'>{this.props.children[1]}</Pane>
 		</div>
 	}
 });
@@ -65,7 +72,6 @@ var Pane = React.createClass({
 				width : this.props.width + 'px'
 			}
 		}
-
 		return <div className={cx('pane', this.props.className)} style={styles}>
 			{this.props.children}
 		</div>