add test clear button

src/inputs/text.js

@@ -28,9 +28,8 @@ $(function(){
 
            if (this.options.clear) {
                this.$clear = $('<span class="editable-clear-x"></span>');
-               this.$tpl = $('<div style="position: relative">')
-                        .append(this.$input)
-                        .append(this.$clear);
+               this.$tpl = $('<div style="position: relative">').append(this.$input).append(this.$clear);
+               this.$input.css('padding-right', '25px');         
            }
            
            if(this.options.inputclass) {
@@ -43,7 +42,8 @@ $(function(){
         },
         
         postrender: function() { 
-            if (this.options.clear) {
+            //attach `clear` button in postrender, because it requires parent height to be calculated (in DOM)
+            if (this.$clear) {
                 var h = this.$input.parent().height() || 20;
                 this.$clear.css('top', (h - this.$clear.outerHeight()) / 2);
                 this.$input.keyup($.proxy(this.toggleClear, this));
@@ -58,15 +58,17 @@ $(function(){
             if(this.$input.is(':visible')) {
                 this.$input.focus();
                 $.fn.editableutils.setCursorPosition(this.$input.get(0), this.$input.val().length);
-                 if(this.options.clear) {
-                     this.toggleClear();
-                 }
+                if(this.toggleClear) {
+                    this.toggleClear();
+                }
             }
         },
         
         //show / hide clear button
         toggleClear: function() {
-            if(!this.options.clear) return;
+            if(!this.$clear) {
+                return;
+            }
             
             if(this.$input.val()) {
                 this.$clear.show();
@@ -92,7 +94,7 @@ $(function(){
         placeholder: null,
         
         /**
-        Whether to show clear button / link or not 
+        Whether to show `clear` button / link or not 
         **/
         clear: true
     });

src/inputs/textarea.js

@@ -27,6 +27,14 @@ $(function(){
         render: function () {
             Textarea.superclass.render.call(this);
 
+            if(this.options.inputclass) {
+                this.$input.addClass(this.options.inputclass); 
+            }            
+            
+            if(this.options.placeholder) {
+               this.$input.attr('placeholder', this.options.placeholder);
+            }             
+            
             //ctrl + enter
             this.$input.keydown(function (e) {
                 if (e.ctrlKey && e.which === 13) {

test/unit/text.js

@@ -503,4 +503,30 @@ $(function () {
                   
   });   
   
+   test("`clear` option", function () {
+        var e = $('<a href="#" data-type="text" data-name="text1">abc</a>').appendTo('#qunit-fixture').editable({
+          clear: true,
+          send: 'never'
+        });
+
+        e.click()
+        var p = tip(e);
+        var c = p.find('.editable-clear-x'); 
+        ok(c.is(':visible'), 'clear shown');
+        p.find('input').val('').trigger('keyup');
+        ok(!c.is(':visible'), 'clear hidden for empty input');
+        p.find('input').val('cde').trigger('keyup');
+        ok(c.is(':visible'), 'clear shown on keyboard input');
+        c.click();
+        ok(!c.is(':visible'), 'clear hidden after click');
+        ok(!p.find('input').val(), 'input empty');
+        
+        p.find('form').submit();
+        
+        //reopen with empty
+        e.click(); 
+        ok(!c.is(':visible'), 'clear hidden for empty input');
+  });
+                   
+         
 });