From 5c7edc2c5466666b502c11daa03ce55ffd38b5c3 Mon Sep 17 00:00:00 2001
From: jspaine <painejs@hotmail.com>
Date: Sun, 9 Jul 2017 10:27:27 +0200
Subject: [PATCH 1/3] allow setting attrs on editable cells

---
 src/TableEditColumn.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/TableEditColumn.js b/src/TableEditColumn.js
index 282dfc291..f19bdd50c 100644
--- a/src/TableEditColumn.js
+++ b/src/TableEditColumn.js
@@ -169,7 +169,7 @@ class TableEditColumn extends Component {
       row
     } = this.props;
     const { shakeEditor } = this.state;
-    const attr = {
+    let attr = {
       ref: 'inputRef',
       onKeyDown: this.handleKeyPress,
       onBlur: this.handleBlur
@@ -179,6 +179,7 @@ class TableEditColumn extends Component {
     let { className } = this.state;
     // put placeholder if exist
     editable.placeholder && (attr.placeholder = editable.placeholder);
+    editable.attrs && (attr = {...editable.attrs, ...attr});
 
     const editorClass = classSet({ 'animated': shakeEditor, 'shake': shakeEditor });
     fieldValue = fieldValue === 0 ? '0' : fieldValue;

From 18591ddab3701416d7ae781a7c70f8152bdf1121 Mon Sep 17 00:00:00 2001
From: jspaine <painejs@hotmail.com>
Date: Mon, 10 Jul 2017 17:03:40 +0200
Subject: [PATCH 2/3] simplify combining attrs

---
 src/TableEditColumn.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/TableEditColumn.js b/src/TableEditColumn.js
index f19bdd50c..170754f65 100644
--- a/src/TableEditColumn.js
+++ b/src/TableEditColumn.js
@@ -169,7 +169,8 @@ class TableEditColumn extends Component {
       row
     } = this.props;
     const { shakeEditor } = this.state;
-    let attr = {
+    const attr = {
+      ...editable.attrs,
       ref: 'inputRef',
       onKeyDown: this.handleKeyPress,
       onBlur: this.handleBlur
@@ -179,7 +180,6 @@ class TableEditColumn extends Component {
     let { className } = this.state;
     // put placeholder if exist
     editable.placeholder && (attr.placeholder = editable.placeholder);
-    editable.attrs && (attr = {...editable.attrs, ...attr});
 
     const editorClass = classSet({ 'animated': shakeEditor, 'shake': shakeEditor });
     fieldValue = fieldValue === 0 ? '0' : fieldValue;

From be823499efae9afa38f867349da6f06404f29253 Mon Sep 17 00:00:00 2001
From: jspaine <painejs@hotmail.com>
Date: Thu, 13 Jul 2017 16:25:48 +0200
Subject: [PATCH 3/3] add ref and event handling

---
 src/TableEditColumn.js | 42 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/TableEditColumn.js b/src/TableEditColumn.js
index 170754f65..632e09e75 100644
--- a/src/TableEditColumn.js
+++ b/src/TableEditColumn.js
@@ -148,8 +148,8 @@ class TableEditColumn extends Component {
   }
 
   focusInEditor() {
-    if (Util.isFunction(this.refs.inputRef.focus)) {
-      this.refs.inputRef.focus();
+    if (this.inputRef && Util.isFunction(this.inputRef.focus)) {
+      this.inputRef.focus();
     }
   }
 
@@ -159,6 +159,30 @@ class TableEditColumn extends Component {
     }
   }
 
+  getInputRef = userRef => ref => {
+    this.inputRef = ref;
+    if (typeof userRef === 'string') {
+      throw new Error('Ref must be a function');
+    }
+    if (Util.isFunction(userRef)) {
+      userRef(ref);
+    }
+  }
+
+  getHandleKeyPress = userHandler => e => {
+    this.handleKeyPress(e);
+    if (Util.isFunction(userHandler)) {
+      userHandler(e);
+    }
+  }
+
+  getHandleBlur = userHandler => e => {
+    this.handleBlur(e);
+    if (Util.isFunction(userHandler)) {
+      userHandler(e);
+    }
+  }
+
   render() {
     const {
       editable,
@@ -171,15 +195,21 @@ class TableEditColumn extends Component {
     const { shakeEditor } = this.state;
     const attr = {
       ...editable.attrs,
-      ref: 'inputRef',
-      onKeyDown: this.handleKeyPress,
-      onBlur: this.handleBlur
+      ref: this.getInputRef(editable.attrs && editable.attrs.ref),
+      onKeyDown: this.getHandleKeyPress(editable.attrs && editable.attrs.onKeyDown),
+      onBlur: this.getHandleBlur(editable.attrs && editable.attrs.onBlur)
     };
     let style = { position: 'relative' };
     let { fieldValue } = this.props;
     let { className } = this.state;
     // put placeholder if exist
-    editable.placeholder && (attr.placeholder = editable.placeholder);
+    if (editable.placeholder) {
+      attr.placeholder = editable.placeholder;
+      /* eslint-disable no-console */
+      console.warn(
+        'Setting editable.placeholder is deprecated. Use editable.attrs to set input attributes');
+      /* eslint-enable no-console */
+    }
 
     const editorClass = classSet({ 'animated': shakeEditor, 'shake': shakeEditor });
     fieldValue = fieldValue === 0 ? '0' : fieldValue;