From 192277b4476605d07533f922c7db4cf3a43e4cd5 Mon Sep 17 00:00:00 2001
From: Amit Uttam <changingrainbows@gmail.com>
Date: Sun, 29 Oct 2017 14:46:03 -0200
Subject: [PATCH] Dynamically grow/shrink dimensions of RIEInput during editing

Currently, RIEInput :

* defaults its <input> size to 20, which limits visibility of entered
text that's longer.
* only shows 20 characters when an RIEInput field is clicked on, to
enter edit mode.
---
 src/RIEStatefulBase.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/RIEStatefulBase.js b/src/RIEStatefulBase.js
index c2c8ce4..9a37608 100644
--- a/src/RIEStatefulBase.js
+++ b/src/RIEStatefulBase.js
@@ -44,6 +44,20 @@ export default class RIEStatefulBase extends RIEBase {
         else if (event.keyCode === 27) { this.cancelEditing() }     // Escape
     };
 
+    keyUp = () => {
+        debug('keyUp')
+        this.resizeInput(this.refs.input);
+    };
+
+    resizeInput = (input) => {
+        if (!input.startW) { input.startW = input.offsetWidth; }
+        const style = input.style;
+        style.width = 0;                        // recalculate from 0, in case characters are deleted
+        let desiredW = input.scrollWidth;  
+        desiredW += input.offsetHeight;         // pad to reduce jerkyness when typing
+        style.width = Math.max(desiredW, input.startW) + 'px';
+    }
+
     textChanged = (event) => {
         debug('textChanged(${event.target.value})')
         this.doValidations(event.target.value.trim());
@@ -56,6 +70,7 @@ export default class RIEStatefulBase extends RIEBase {
         if (this.state.editing && !prevState.editing) {
             debug('entering edit mode')
             inputElem.focus();
+            this.resizeInput(inputElem);
             this.selectInputText(inputElem);
         } else if (this.state.editing && prevProps.text != this.props.text) {
             debug('not editing && text not equal previous props -- finishing editing')
@@ -73,6 +88,7 @@ export default class RIEStatefulBase extends RIEBase {
             onBlur={this.elementBlur}
             ref="input"
             onKeyDown={this.keyDown}
+            onKeyUp={this.keyUp}
             {...this.props.editProps} />;
     };