Make selection behaviour match ember-frost-table

addon/components/frost-fixed-table.js

@@ -16,6 +16,7 @@ export default Component.extend({
 
   // == Keyword Properties ====================================================
 
+  classNameBindings: ['_isShiftDown:shift-down'],
   layout,
 
   // == PropTypes =============================================================
@@ -32,6 +33,7 @@ export default Component.extend({
     onSelectionChange: PropTypes.func,
 
     // state
+    _isShiftDown: PropTypes.bool,
     _itemComparator: PropTypes.func,
 
     _rangeState: PropTypes.shape({
@@ -421,10 +423,26 @@ export default Component.extend({
     }
   },
 
+  setShift (event) {
+    if (!this.isDestroyed) {
+      this.set('_isShiftDown', event.shiftKey)
+    }
+  },
+
   // == DOM Events ============================================================
 
   // == Lifecycle Hooks =======================================================
 
+  init () {
+    this._super(...arguments)
+    this._keyHandler = this.setShift.bind(this)
+    $(document).on(`keyup.${this.elementId} keydown.${this.elementId}`, this._keyHandler)
+  },
+
+  willDestroy () {
+    $(document).off(`keyup.${this.elementId} keydown.${this.elementId}`, this._keyHandler)
+  },
+
   /**
    * Set up synced scrolling as well as calculating padding for middle sections
    */

addon/components/frost-table-row.js

@@ -3,14 +3,14 @@
  */
 
 import Ember from 'ember'
-const {isEmpty} = Ember
+const {ViewUtils, isEmpty} = Ember
+const {isSimpleClick} = ViewUtils
 import computed, {readOnly} from 'ember-computed-decorators'
 import {Component} from 'ember-frost-core'
 import {ColumnPropType, ItemPropType} from 'ember-frost-table/typedefs'
 import {PropTypes} from 'ember-prop-types'
 
 import layout from '../templates/components/frost-table-row'
-import {click} from '../utils/selection'
 
 export default Component.extend({
   // == Dependencies ==========================================================
@@ -64,7 +64,20 @@ export default Component.extend({
   // == DOM Events ============================================================
 
   click (event) {
-    click(event, this.onSelect, this.get('item'))
+    const isRangeSelect = event.shiftKey
+    const isSpecificSelect = false
+
+    // Only process simple clicks or clicks with the acceptable modifiers
+    if (isSimpleClick(event) || isRangeSelect) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      this.onSelect({
+        isRangeSelect,
+        isSpecificSelect,
+        item: this.get('item')
+      })
+    }
   },
 
   // == Lifecycle Hooks =======================================================

addon/components/frost-table.js

@@ -1,3 +1,4 @@
+/* global $ */
 /**
  * Component definition for the frost-table component
  */
@@ -118,6 +119,16 @@ export default Component.extend({
 
   // == Lifecycle Hooks =======================================================
 
+  init () {
+    this._super(...arguments)
+    this._keyHandler = this.setShift.bind(this)
+    $(document).on(`keyup.${this.elementId} keydown.${this.elementId}`, this._keyHandler)
+  },
+
+  willDestroy () {
+    $(document).off(`keyup.${this.elementId} keydown.${this.elementId}`, this._keyHandler)
+  },
+
   didRender () {
     const selectable = this.get('_isSelectable')
     let totalWidth = 0

app/styles/ember-frost-table/_frost-fixed-table.scss

@@ -138,4 +138,9 @@ $frost-fixed-table-selected-cell-margin: -1px;
     flex: 1 0 auto;
     vertical-align: middle;
   }
+
+  &.shift-down {
+    // Range select doesn't select text
+    user-select: none;
+  }
 }