Selection issue on start dragging

[Tal500]

There is a bug while trying to start dragging. The user can accidentally select one pane content, if he is fast enough.
In Firefox, if the user goes to the edge of the split and drag fast enough, he may be able to select (wasn't happen in Edge.) Here is a demo in Firefox:

splitpane-selection-issue.mov

The user is unable to select it after the "first frame" of the dragging, because of the following lines in the css conf:

splitpanes/src/components/splitpanes/splitpanes.vue

Lines 690 to 706 in adc5096

	render () {
	return h(
	'div',
	{
	ref: 'container',
	class: [
	'splitpanes',
	`splitpanes--${this.horizontal ? 'horizontal' : 'vertical'}`,
	{
	'splitpanes--dragging': this.touch.dragging
	}
	]
	},
	this.$slots.default()
	)
	}
	}

and the following css def:

splitpanes/src/components/splitpanes/splitpanes.vue

Lines 719 to 727 in adc5096

	&__pane {
	width: 100%;
	height: 100%;
	overflow: hidden;
	.splitpanes--vertical & {transition: width 0.2s ease-out;}
	.splitpanes--horizontal & {transition: height 0.2s ease-out;}
	.splitpanes--dragging & {transition: none;}
	}

However, the user can do on the "first frame" (in Firefox at least) if he is fast enough. The reason is bacause
The reason it happen is because this.touch.dragging is set to true only in:

splitpanes/src/components/splitpanes/splitpanes.vue

Lines 89 to 97 in adc5096

	onMouseMove (event) {
	if (this.touch.mouseDown) {
	// Prevent scrolling while touch dragging (only works with an active event, eg. passive: false).
	event.preventDefault()
	this.touch.dragging = true
	this.calculatePanesSize(this.getCurrentMouseDrag(event))
	this.$emit('resize', this.panes.map(pane => ({ min: pane.min, max: pane.max, size: pane.size })))
	}
	},

but rather should be set to true starting from onMouseDown.
This way, the browser would immediately forbid the user to select the panes, and wouldn't wait for the next onMouseMove event.