[CLOSED-252] Placeholder not working for TextArea on iPad

[ahhrrr]

Sencha Touch version tested:

• 0.9 rev 3
• only default ext-all.css

Platform tested against:

• iOS 3.x

Description:

• Form fields allow you to configure placeholder text that will be displayed until a user inputs real data. You can specify placeholder text when configuring a new form field. For some reason, placeholder text does not appear in TextArea fields on iPad MobileSafari 3.2. Everything works as expected in desktop Safari (5.0.1) and Google Chrome (6).

Test Case:

I started with the Form example distributed with Sencha Touch 0.93. I added placeholder values to two form fields: the 'name' textfield, and the 'bio' textarea:

{
  xtype: 'textfield',
  name : 'name',
  label: 'Name',
  placeholder: 'Test Placeholder',
  autoCapitalize : false
}

{
  xtype : 'textarea',
  name  : 'bio',
  label : 'Bio',
  placeholder: 'Test Placeholder',
  maxLength : 60,
  maxRows : 10
}

Full code at: http://gist.github.com/562798

Steps to reproduce the problem:

• Add placeholder value to textarea field

The result that was expected:

• Field should prepopulate with value specified by placeholder

The result that occurs instead:

• The textarea is blank

Screenshot or Video:

• Textfield success on iPad:
  
• Failing TextArea on iPad Simulator:
  
• Working in Chrome:
  

Debugging already done:

• I tried re-assigning the property to the component and calling doLayout() on the fieldset, but that doesn't seem to work either.

Possible fix:

• Since it is rendering correctly on desktop WebKit, I'm not sure – maybe a CSS issue?

[evant]

I think it's a bug in the browser:

Ext.setup({
    onReady: function(){
        var ta = document.createElement('textarea');
        ta.placeholder = 'foo';
        document.body.appendChild(ta);
    }
});

I can confirm that it works ok on the desktop version. As such I don't think it's something we can fix so I'll close it off. Thanks for the detailed report.

[mackalicious]

I ran into a similar problem.

It looks like Sencha 0.93 has switched to calling the property 'placeHolder' instead of 'placeholder'. It also looks like the switch wasn't properly implemented in TextArea. If you look at renderTpl for Ext.form.Field, you'll see this line:

'<tpl if="placeHolder">placeholder="{placeHolder}" </tpl>',

Whereas in Ext.form.TextArea it is:

'<tpl if="placeholder">placeholder="{placeholder}" </tpl>',

My temporary fix is to override TextArea's renderTpl with my own copy, which is the same as the source code but with the 'placeHolder' properly capitalized. Works for me now.

[evant]

Correct, there was a typo which has since been fixed, however on my iPad the placeholder never shows up,where using a TextArea object or just creating it normally like above.