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/5] 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/5] 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/5] 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;

From cd6e711ed05130550d6715a310b354f2d484c111 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sun, 16 Jul 2017 17:19:22 +0800
Subject: [PATCH 4/5] refine for setting attributes on editor

---
 src/TableEditColumn.js | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/TableEditColumn.js b/src/TableEditColumn.js
index e3dcfedbd..f2616c2e4 100644
--- a/src/TableEditColumn.js
+++ b/src/TableEditColumn.js
@@ -161,25 +161,24 @@ 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);
+    } else if (typeof userRef === 'string') {
+      throw new Error('Ref must be a function');
     }
   }
 
-  getHandleKeyPress = userHandler => e => {
+  getHandleKeyPress = customHandler => e => {
     this.handleKeyPress(e);
-    if (Util.isFunction(userHandler)) {
-      userHandler(e);
+    if (Util.isFunction(customHandler)) {
+      customHandler(e);
     }
   }
 
-  getHandleBlur = userHandler => e => {
+  getHandleBlur = customHandler => e => {
     this.handleBlur(e);
-    if (Util.isFunction(userHandler)) {
-      userHandler(e);
+    if (Util.isFunction(customHandler)) {
+      customHandler(e);
     }
   }
 
@@ -202,7 +201,7 @@ class TableEditColumn extends Component {
     let style = { position: 'relative' };
     let { fieldValue } = this.props;
     let { className } = this.state;
-    // put placeholder if exist
+
     if (editable.placeholder) {
       attr.placeholder = editable.placeholder;
       /* eslint-disable no-console */

From a864f8241c6e3f6380d95f3d867e7e22822e42e5 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sun, 16 Jul 2017 17:20:58 +0800
Subject: [PATCH 5/5] example for #1478

---
 examples/js/advance/edit-type-table.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/examples/js/advance/edit-type-table.js b/examples/js/advance/edit-type-table.js
index bc4055e10..23f30fba7 100644
--- a/examples/js/advance/edit-type-table.js
+++ b/examples/js/advance/edit-type-table.js
@@ -1,4 +1,5 @@
 /* eslint max-len: 0 */
+/* eslint no-console: 0 */
 import React from 'react';
 import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
 
@@ -66,10 +67,17 @@ export default class EditTypeTable extends React.Component {
   }
 
   render() {
+    // custom attributes on editor
+    const attrs = {
+      rows: 10,
+      onKeyDown: function() {
+        console.log('keydown event trigger');
+      }
+    };
     return (
       <BootstrapTable data={ jobs } cellEdit={ cellEditProp }>
         <TableHeaderColumn dataField='id' isKey={ true }>Job ID</TableHeaderColumn>
-        <TableHeaderColumn dataField='name' editable={ { type: 'textarea' } }>Job Name</TableHeaderColumn>
+        <TableHeaderColumn dataField='name' editable={ { type: 'textarea', attrs: attrs } }>Job Name</TableHeaderColumn>
         <TableHeaderColumn dataField='type1' dataFormat={ this.formatType } editable={ { type: 'select', options: { values: jobTypes } } }>Job Type1</TableHeaderColumn>
         <TableHeaderColumn dataField='type2' editable={ { type: 'select', options: { values: this.jobTypes } } }>Job Type2</TableHeaderColumn>
         <TableHeaderColumn dataField='active' editable={ { type: 'checkbox', options: { values: 'Y:N' } } }>Active</TableHeaderColumn>