diff --git a/skins/base/views/atoms/EditableText.js b/skins/base/views/atoms/EditableText.js
index a8f55814..07bdc911 100644
--- a/skins/base/views/atoms/EditableText.js
+++ b/skins/base/views/atoms/EditableText.js
@@ -43,14 +43,22 @@ module.exports = React.createClass({
},
onFinish: function(ev) {
- this.setValue(ev.target.value);
+ if (ev.target.value) {
+ this.setValue(ev.target.value);
+ } else {
+ this.cancelEdit();
+ }
},
render: function() {
var editable_el;
if (this.state.phase == this.Phases.Display) {
- editable_el =
{this.state.value}
;
+ if (this.state.value) {
+ editable_el = {this.state.value}
;
+ } else {
+ editable_el = {this.props.placeHolder}
;
+ }
} else if (this.state.phase == this.Phases.Edit) {
editable_el = (
diff --git a/src/controllers/atoms/EditableText.js b/src/controllers/atoms/EditableText.js
index ac469736..a3145606 100644
--- a/src/controllers/atoms/EditableText.js
+++ b/src/controllers/atoms/EditableText.js
@@ -22,6 +22,7 @@ module.exports = {
propTypes: {
onValueChanged: React.PropTypes.func,
initalValue: React.PropTypes.string,
+ placeHolder: React.PropTypes.string,
},
Phases: {
@@ -33,6 +34,7 @@ module.exports = {
return {
onValueChanged: function() {},
initalValue: '',
+ placeHolder: 'Click to set',
};
},