fix(CellEditContainer, Grid): Fix related to selection on edit

Using method select instead of setSelectionRange for select all as first method throws error for
input type other than text or textarea

src/CellEditContainer.js

@@ -23,8 +23,9 @@ class CellEditContainer extends React.Component {
     // console.log(this.node.focus)
     if (this.node && this.node.focus) {
       this.node.focus()
-      if (this.node.setSelectionRange) {
-        this.node.setSelectionRange(0, this.node.value.length)
+      if (this.node.select) {
+        this.node.select()
+        // this.node.setSelectionRange(0, this.node.value.length)
       }
     }
   }

src/Grid.js

@@ -938,7 +938,7 @@ class Grid extends React.PureComponent {
     width: header.width,
     [COL_IDENT_ATTRIBUTE]: header.ident,
     onClick: this.props.sortEnabled ? this.columnHeaderClick : undefined,
-    sortOrder: this.props.sortEnabled ? sortOrderOf(header)(this.state.sortOptions) : undefined,
+    sortOrder: this.props.sortEnabled ? sortOrderOf(header)(this.sortOptions()) : undefined,
     'data-column-index': index,
     ...rest,
   })

src/RowEditor.js

@@ -156,8 +156,9 @@ class RowEditor extends React.Component {
     if (!prevProps.isEditing && this.props.isEditing) {
       if (this.focusNode) {
         if (this.focusNode) this.focusNode.focus()
-        if (this.focusNode.setSelectionRange) {
-          this.focusNode.setSelectionRange(0, this.focusNode.value.length)
+        if (this.focusNode.select) {
+          this.focusNode.select()
+          // this.focusNode.setSelectionRange(0, this.focusNode.value.length)
         }
       }
       // eslint-disable-next-line react/no-did-update-set-state

src/stories/data.js

@@ -54,7 +54,7 @@ const unitDataFormatter = ({ value }) => unitMap[value] || value
 
 /* prettier-ignore */
 export const headers = [
-  dateCol({ ident: 'transDate', display: 'Trans-Date', width:120, isKey:true, }),
+  dateCol({ ident: 'transDate', display: 'Trans-Date', width:140, isKey:true, }),
   strCol({ ident: 'unitId', display: 'Unit', width:180, isKey:true, dataFormatter:unitDataFormatter,choices:unitChoices
    , acceptRawText : true , setInvalidMessage : ({value}) => !unitMap[value] && value !== 'prakash' && 'Please Enter Valid Data.' }),
   intCol({ ident: 'he', display: 'HE', width: 40,isKey:true, numFormat:"0", }),

src/stories/virtualized/virtualized.stories.js

@@ -9,6 +9,7 @@ import Grid, {
   VirtualizedCell,
 } from '../../index'
 import { createData, headers } from '../data'
+import { CellInputEditor } from '../../Components'
 
 const customizedCellRender = params => {
   const { gridToolProps, reactVirtualizedProps, ...rest } = params
@@ -54,9 +55,29 @@ const customizedCellRender = params => {
   return defaultVirtualizedCellRender(params)
 }
 
+export const dateInputCellEditRender = ({ getInputProps }) => (
+  <CellInputEditor type="date" {...getInputProps({ refKey: 'innerRef' })} />
+)
+
 const data = createData(200)
 storiesOf('Virtualized grid', module)
-  .add('Basic', () => <Grid data={data} headers={headers} render={virtualizedGridRenderer()} />)
+  .add('Basic', () => (
+    <Grid
+      data={data}
+      headers={headers}
+      render={virtualizedGridRenderer({
+        cellRender: props => {
+          const type = props.gridToolProps.headers[props.reactVirtualizedProps.columnIndex].type
+          return defaultVirtualizedCellRender({
+            ...props,
+            editRender: (type === 'date-time' || type === 'date') && dateInputCellEditRender,
+          })
+        },
+      })}
+      editMode="cell"
+      isEditable={() => true}
+    />
+  ))
   .add('Fixed Col and Free edit', () => (
     <GridToolContext.Provider value={{ columnHeaderProps: { backgroundColor: 'pink' } }}>
       <Grid

src/virtualized/virtualizedRenderer.js

@@ -7,7 +7,7 @@ import { Provider } from './VirtualizedContext'
 import { defaultCellRender, cellRenderWrapper, defaultRowHeaderRender } from './cellRender'
 import GridToolsContext from '../context'
 
-const totalColWidth = cols => cols.map(c => c.width).reduce((c1, c2) => c1 + c2)
+const totalColWidth = cols => cols.map(c => c.width).reduce((c1, c2) => c1 + c2, 0)
 
 const colWidthOf = cols => ({ index }) => cols[index].width