diff --git a/src-large/largeGrid.jsx b/src-large/largeGrid.jsx
index ff1f018..bdcd026 100644
--- a/src-large/largeGrid.jsx
+++ b/src-large/largeGrid.jsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import {reactCellRendererFactory} from 'ag-grid-react';
+import React, {Component} from 'react';
 import SimpleCellRenderer from './simpleCellRenderer.jsx';
 
 import {AgGridReact} from 'ag-grid-react';
@@ -7,7 +6,7 @@ import {AgGridReact} from 'ag-grid-react';
 // put this line in to use ag-Grid enterprise
 // import 'ag-grid-enterprise';
 
-export default class MyApp extends React.Component {
+export default class MyApp extends Component {
 
     constructor() {
         super();
@@ -22,22 +21,22 @@ export default class MyApp extends React.Component {
 
     createColumnNames() {
         // creates column names by iterating the alphabet twice, eg {'aa','ab','ac',.....'zz'}
-        var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
+        const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
         this.columnNames = [];
-        alphabet.forEach( letter1 => {
-            alphabet.forEach( letter2 => {
+        alphabet.forEach(letter1 => {
+            alphabet.forEach(letter2 => {
                 this.columnNames.push(letter1 + letter2);
             });
         });
     }
 
     createRowData() {
-        var rowData = [];
+        const rowData = [];
 
-        for (var i = 0; i<1000; i++) {
-            var item = {};
-            this.columnNames.forEach( colName => {
-                item[colName] = '('+colName.toUpperCase()+','+i+')'
+        for (let i = 0; i < 1000; i++) {
+            const item = {};
+            this.columnNames.forEach(colName => {
+                item[colName] = '(' + colName.toUpperCase() + ',' + i + ')'
             });
             rowData.push(item);
         }
@@ -46,9 +45,9 @@ export default class MyApp extends React.Component {
     }
 
     createColumnDefs() {
-        var columnDefs = [];
+        const columnDefs = [];
 
-        this.columnNames.forEach( colName => {
+        this.columnNames.forEach(colName => {
             columnDefs.push({
                 headerName: colName.toUpperCase(),
                 field: colName,
@@ -63,7 +62,7 @@ export default class MyApp extends React.Component {
     render() {
         return (
             <div style={{height: '100%'}} className="ag-fresh">
-                    <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData} />
+                <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData}/>
             </div>
         );
     }
diff --git a/src/NavItem.jsx b/src/NavItem.jsx
index 975c7aa..ec6cdd6 100644
--- a/src/NavItem.jsx
+++ b/src/NavItem.jsx
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
+import * as PropTypes from 'prop-types';
 import {Route, Link} from 'react-router-dom'
 
 // for bootstrap li active functionality
diff --git a/src/editorComponentExample/NumericEditor.jsx b/src/editorComponentExample/NumericEditor.jsx
index 2c8b9e0..ba7ab45 100644
--- a/src/editorComponentExample/NumericEditor.jsx
+++ b/src/editorComponentExample/NumericEditor.jsx
@@ -32,11 +32,12 @@ export default class MoodEditor extends Component {
     }
 
     focus() {
-        setTimeout(() => {
-            this.refs.input.focus();
-            this.refs.input.setSelectionRange(this.state.value.length, this.state.value.length);
-
-        })
+        if (!this.cancelBeforeStart) {
+            setTimeout(() => {
+                this.refs.input.focus();
+                this.refs.input.setSelectionRange(this.state.value.length, this.state.value.length);
+            })
+        }
     }
 
     getValue() {
diff --git a/src/filterComponentExample/PartialMatchFilter.jsx b/src/filterComponentExample/PartialMatchFilter.jsx
index 09506e8..5078fef 100644
--- a/src/filterComponentExample/PartialMatchFilter.jsx
+++ b/src/filterComponentExample/PartialMatchFilter.jsx
@@ -34,7 +34,7 @@ export default class PartialMatchFilter extends Component {
         this.state.text = model ? model.value : '';
     }
 
-    afterGuiAttached(params) {
+    componentDidMount() {
         this.focus();
     }