Use preventDefault in down instead of setting style

core-splitter.html

@@ -8,7 +8,7 @@
 -->
 
 <!--
-`core-splitter` provides a spilt bar and dragging on the split bar
+`core-splitter` provides a split bar and dragging on the split bar
 will resize the sibling element.  Use its `direction` property to indicate
 which sibling element to be resized and the orientation.  Usually you would want
 to use `core-splitter` along with flex layout so that the other sibling
@@ -24,7 +24,7 @@
 
 In the above example, dragging the splitter will resize the _left_ element.  And
 since the parent container is a flexbox and the _right_ element has
-`flex`, the _right_ elemnt will be auto-resized.
+`flex`, the _right_ element will be auto-resized.
 
 For horizontal splitter set `direction` to "up" or "down".
 
@@ -43,7 +43,8 @@
 
 <link rel="import" href="../polymer/polymer.html">
 
-<polymer-element name="core-splitter" attributes="direction locked minSize allowOverflow disableSelection" on-trackstart="{{trackStart}}" on-track="{{track}}" on-trackend={{trackEnd}}>
+<polymer-element name="core-splitter" attributes="direction locked minSize allowOverflow"
+    on-trackstart="{{trackStart}}" on-track="{{track}}" on-down="{{preventSelection}}">
 
 <template>
 
@@ -92,15 +93,6 @@
      */
     allowOverflow: false,
 
-    /**
-     * Disables the selection of text while the splitter is being moved
-     *
-     * @attribute disableSelection
-     * @type boolean
-     * @type default false
-     */
-     disableSelection: false,
-
     ready: function() {
       this.directionChanged();
     },
@@ -135,10 +127,6 @@
     trackStart: function() {
       this.update();
       this.size = parseInt(getComputedStyle(this.target)[this.dimension]);
-      if (this.disableSelection) {
-        var s = this.parentNode.style;
-        s.webkitUserSelect = s.MozUserSelect = s.msUserSelect = 'none';
-      }
     },
 
     track: function(e) {
@@ -147,16 +135,13 @@
       }
       var d = e[this.horizontal ? 'dy' : 'dx'];
       this.target.style[this.dimension] =
-        this.size + (this.isNext ? -d : d) + 'px';
+          this.size + (this.isNext ? -d : d) + 'px';
     },
-    trackEnd: function (e) {
-      if (this.disableSelection) {
-        var s = this.parentNode.style;
-        s.webkitUserSelect = s.MozUserSelect = s.msUserSelect = '';
-      }
-    }
 
+    preventSelection: function(e) {
+      e.preventDefault();
+    }
   });
 
 </script>
-</polymer-element>
+</polymer-element>