From 608282b318508dd3165e919aaaf2c5e3f5ec5e6f Mon Sep 17 00:00:00 2001
From: vmakhaev <vmakhaev@gmail.com>
Date: Wed, 3 Dec 2014 18:52:08 +0300
Subject: [PATCH 1/4] add input onBlur

---
 src/js/app-bar.jsx |  2 +-
 src/js/input.jsx   | 21 +++++++++++++--------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/js/app-bar.jsx b/src/js/app-bar.jsx
index 43cf582baaa34a..5caa1174950519 100644
--- a/src/js/app-bar.jsx
+++ b/src/js/app-bar.jsx
@@ -55,4 +55,4 @@ var AppBar = React.createClass({
 
 });
 
-module.exports = AppBar;
\ No newline at end of file
+module.exports = AppBar;
diff --git a/src/js/input.jsx b/src/js/input.jsx
index db12efe4807c62..2f4323a3acf6a7 100644
--- a/src/js/input.jsx
+++ b/src/js/input.jsx
@@ -17,7 +17,8 @@ var Input = React.createClass({
     placeholder: React.PropTypes.string,
     type: React.PropTypes.string,
     name: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func
+    onChange: React.PropTypes.func,
+    onBlur: React.PropTypes.func
   },
 
   mixins: [Classable],
@@ -52,20 +53,20 @@ var Input = React.createClass({
       'mui-error': this.props.error !== undefined && this.props.error !== null
     }),
     inputElement = this.props.multiline ?
-      this.props.valueLink ? 
+      this.props.valueLink ?
         <textarea {...this.props} className="mui-input-textarea" placeholder=""
-          rows={this.state.rows} /> : 
-        <textarea {...this.props} value={this.state.value} className="mui-input-textarea" 
-          placeholder="" rows={this.state.rows} onChange={this._onTextAreaChange} /> :
-        this.props.valueLink ? 
+          rows={this.state.rows} /> :
+        <textarea {...this.props} value={this.state.value} className="mui-input-textarea"
+          placeholder="" rows={this.state.rows} onChange={this._onTextAreaChange} onBlur={this._onInputBlur} /> :
+        this.props.valueLink ?
           <input {...this.props} ref="input" placeholder="" /> :
           <input {...this.props} ref="input" value={this.state.value} placeholder=""
-            onChange={this._onInputChange} />;
+            onChange={this._onInputChange} onBlur={this._onInputBlur} />;
 
     return (
       <div ref={this.props.ref} className={classes}>
         {inputElement}
-        <span className="mui-input-placeholder" 
+        <span className="mui-input-placeholder"
           onClick={this._onPlaceholderClick}>{this.props.placeholder}</span>
         <span className="mui-input-highlight"></span>
         <span className="mui-input-bar"></span>
@@ -93,6 +94,10 @@ var Input = React.createClass({
     if (this.props.onChange) this.props.onChange(e, value);
   },
 
+  _onInputBlur: function(e) {
+    if (this.props.onBlur) this.props.onBlur(e);
+  },
+
   _onPlaceholderClick: function(e) {
     this.refs.input.getDOMNode().focus();
   },

From d8ecf6d87e837e5ec0d632e25aa9cb7ff8f7170e Mon Sep 17 00:00:00 2001
From: vmakhaev <vmakhaev@gmail.com>
Date: Wed, 3 Dec 2014 20:38:05 +0300
Subject: [PATCH 2/4] add input inline placeholder

---
 src/js/input.jsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/js/input.jsx b/src/js/input.jsx
index 2f4323a3acf6a7..f12d08323137d8 100644
--- a/src/js/input.jsx
+++ b/src/js/input.jsx
@@ -8,6 +8,7 @@ var Input = React.createClass({
   propTypes: {
     multiline: React.PropTypes.bool,
     required: React.PropTypes.bool,
+    inlinePlaceholder: React.PropTypes.bool,
     min: React.PropTypes.number,
     max: React.PropTypes.number,
     step: React.PropTypes.number,
@@ -52,22 +53,24 @@ var Input = React.createClass({
       'mui-text': this.props.type === 'text',
       'mui-error': this.props.error !== undefined && this.props.error !== null
     }),
+    placeholder = this.props.inlinePlaceholder ? this.props.placeholder : "",
     inputElement = this.props.multiline ?
       this.props.valueLink ?
-        <textarea {...this.props} className="mui-input-textarea" placeholder=""
+        <textarea {...this.props} className="mui-input-textarea" placeholder={placeholder}
           rows={this.state.rows} /> :
         <textarea {...this.props} value={this.state.value} className="mui-input-textarea"
-          placeholder="" rows={this.state.rows} onChange={this._onTextAreaChange} onBlur={this._onInputBlur} /> :
+          placeholder={placeholder} rows={this.state.rows} onChange={this._onTextAreaChange} onBlur={this._onInputBlur} /> :
         this.props.valueLink ?
-          <input {...this.props} ref="input" placeholder="" /> :
-          <input {...this.props} ref="input" value={this.state.value} placeholder=""
-            onChange={this._onInputChange} onBlur={this._onInputBlur} />;
+          <input {...this.props} ref="input" placeholder={placeholder} /> :
+          <input {...this.props} ref="input" value={this.state.value} placeholder={placeholder}
+            onChange={this._onInputChange} onBlur={this._onInputBlur} />
+    placeholderSpan = this.props.inlinePlaceholder ? null : <span className="mui-input-placeholder"
+      onClick={this._onPlaceholderClick}>{this.props.placeholder}</span>;
 
     return (
       <div ref={this.props.ref} className={classes}>
         {inputElement}
-        <span className="mui-input-placeholder"
-          onClick={this._onPlaceholderClick}>{this.props.placeholder}</span>
+        {placeholderSpan}
         <span className="mui-input-highlight"></span>
         <span className="mui-input-bar"></span>
         <span className="mui-input-description">{this.props.description}</span>

From 583e5f7bbcd6cc235076b2adfc0f3357f8b2e757 Mon Sep 17 00:00:00 2001
From: vmakhaev <vmakhaev@gmail.com>
Date: Wed, 3 Dec 2014 20:49:48 +0300
Subject: [PATCH 3/4] fix input placeholder color

---
 src/less/components/input.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/less/components/input.less b/src/less/components/input.less
index 58cfe84ca194b4..c0c3f9d5f3e98e 100644
--- a/src/less/components/input.less
+++ b/src/less/components/input.less
@@ -306,7 +306,7 @@
 }
 
 ::-webkit-input-placeholder {
-   color: red !important;
+   //color: red !important;
    position: absolute !important;
    top: -20px !important;
 }

From 1a783fb373c53f02a482b4e5cac8c1831aa36363 Mon Sep 17 00:00:00 2001
From: vmakhaev <vmakhaev@gmail.com>
Date: Wed, 3 Dec 2014 21:15:23 +0300
Subject: [PATCH 4/4] add input autocomplete

---
 src/js/input.jsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/js/input.jsx b/src/js/input.jsx
index f12d08323137d8..c181e59ceee706 100644
--- a/src/js/input.jsx
+++ b/src/js/input.jsx
@@ -8,10 +8,12 @@ var Input = React.createClass({
   propTypes: {
     multiline: React.PropTypes.bool,
     required: React.PropTypes.bool,
+    autocomplete: React.PropTypes.bool,
     inlinePlaceholder: React.PropTypes.bool,
     min: React.PropTypes.number,
     max: React.PropTypes.number,
     step: React.PropTypes.number,
+    rows: React.PropTypes.number,
     inputStyle: React.PropTypes.string,
     error: React.PropTypes.string,
     description: React.PropTypes.string,
@@ -27,7 +29,7 @@ var Input = React.createClass({
   getInitialState: function() {
     return {
       value: this.props.defaultValue,
-      rows: 1
+      rows: this.props.rows
     };
   },
 
@@ -53,17 +55,19 @@ var Input = React.createClass({
       'mui-text': this.props.type === 'text',
       'mui-error': this.props.error !== undefined && this.props.error !== null
     }),
+    autocomplete = this.props.autocomplete ? "on" : "off",
     placeholder = this.props.inlinePlaceholder ? this.props.placeholder : "",
     inputElement = this.props.multiline ?
       this.props.valueLink ?
         <textarea {...this.props} className="mui-input-textarea" placeholder={placeholder}
-          rows={this.state.rows} /> :
+          rows={this.state.rows} autoComplete={autocomplete} /> :
         <textarea {...this.props} value={this.state.value} className="mui-input-textarea"
-          placeholder={placeholder} rows={this.state.rows} onChange={this._onTextAreaChange} onBlur={this._onInputBlur} /> :
+          placeholder={placeholder} rows={this.state.rows} onChange={this._onTextAreaChange}
+          onBlur={this._onInputBlur} autoComplete={autocomplete} /> :
         this.props.valueLink ?
-          <input {...this.props} ref="input" placeholder={placeholder} /> :
+          <input {...this.props} ref="input" placeholder={placeholder} autoComplete={autocomplete} /> :
           <input {...this.props} ref="input" value={this.state.value} placeholder={placeholder}
-            onChange={this._onInputChange} onBlur={this._onInputBlur} />
+            onChange={this._onInputChange} onBlur={this._onInputBlur} autoComplete={autocomplete} />
     placeholderSpan = this.props.inlinePlaceholder ? null : <span className="mui-input-placeholder"
       onClick={this._onPlaceholderClick}>{this.props.placeholder}</span>;