Enyo 1.0 + textarea (in Android)

edited February 2012 in Enyo 1.0
So, me and Greg Hrebek have been working on an alternate solution to the RichText kind for iOS 4 and Android.

We have a sweet lil kind that works with a Textarea input. Works great in Chrome.

However... Testing on Android reveals some serious issues. If I setup a TextArea like this:
{name: "fld_Message", nodeTag: "textarea", content: "I'm in a form!"}
It shows up fine on Android. When I tap into the box, the Virtual Keyboard does not show up. No matter how I try it, the VKB will not show. If I am in a form field that precedes this, it does show the "Next" button for tabbing. However, tabbing next to a textarea, and the VKB hides itself. Even tried wrapping the form fields inside a nodeTag: "form", just to be safe. No go. The actual HTML Code (from above) it is spitting out is:
I'm in a form!
Now, I went and created a very super simple html file to test the basic code:
<!doctype html>


FlashCards

function onBodyLoad(){ document.addEventListener("deviceready", onDeviceReady, false); } function onDeviceReady(){ } Testing a form textarea form type
This works perfectly fine. VKB pops up, next/prev works, no problems. So, this leads me to believe something in Enyo is interfering. Searched the framework and all I can see is a textarea is used for the clipboard set/get, and that should not interfere in any way.

Any ideas? I'm fresh out of them.

Comments

  • edited February 2012
    Does the VKB still pop up if you create the text area dynamically in JS sans Enyo and append as child to the form node?
  • edited February 2012
    @rsanchez1: Good thought, had not tried it. Tried it tho, renders the element fine and VBK works as expected for the DOM created version:
    <!doctype html>


    FlashCards

    function onBodyLoad(){ //--> For chrome testing onDeviceReady(); } function onDeviceReady(){ try{ var ta = document.createElement('textarea'); ta.setAttribute('id', 'ta'); ta.setAttribute('style', 'background-color:red; min-height:75px;'); ta.setAttribute('value', 'I\'m created in the DOM'); document.body.appendChild(ta) }catch(e){ alert("Error: " + e); } } Testing a form textarea form type I'm in a form!
    Adding it into my Enyo code, and no dice. No VBK, nada:
    		var ta = document.createElement('textarea');
    		ta.setAttribute('id', 'ta');
    		ta.setAttribute('style', 'background-color:red; min-height:75px;');
    		ta.setAttribute('value', 'I\'m created in the DOM');
    		document.getElementById("first_feedback_details_control9").appendChild(ta);
    
  • That's strange. It's definitely something with Enyo then. You're saying that the same exact code in an Enyo app does not work? Seems that as soon as Enyo loads, textareas created dynamically get borked. Good thing is that Enyo 2.0 is not as complex as 1.0 (at least without the UI). I'll try and take a look tomorrow.
  • edited February 2012
    The exact same code in Enyo does not work. My control is lazy, so stuck it in the rendered function. The textarea is created and looks right, just does not bring up the VKB. Again, the exact same code outside of Enyo works just fine as expected and brings up the VKB when focused.

    It's not a surprise to me really, I have the same issue with SqlLite on Blackberry. Works fine outside Enyo, not so good inside Enyo.

    Really need to get this one solved if I can. If so, I will have a replacement kind for RichText that will work x-platform and x-platform-version... It's kind of a big deal.
  • edited February 2012
    I think you might need to apply some styles to the textarea tag. Looking in the enyo-1.0 CSS file, I see for our RichText, we apply the styles
    .enyo-richtext {
    	-webkit-user-select: text;
    	-webkit-user-modify: read-write;
    	-webkit-line-break: after-white-space;
    }
    By default, Enyo's dom.css turns off user-select for body, so that inherits down into every element if it's not changed.
  • Ben,

    Thanks, but no go. Added css class for it and even set those explicitly on the element and still no VKB.
  • edited February 2012
    I googled this problem and this stackoverflow page came up first. Seems like it's worth a try:

    http://stackoverflow.com/questions/4861986/virtual-keyboard-does-not-appear-while-clicking-on-text-field-in-android-after-u

    There's also this thing about going into the Java side of PhoneGap to add a method to show the virtual keyboard. Could hook it up to an event on the textarea and see if the popped-up virtual keyboard input shows up in the textarea:

    http://www.sencha.com/forum/showthread.php?141560-Sencha-Touch-Android-show-and-hide-keyboard-with-code&s=7b093fc18a3d5d79865fc1ea674a8a1a

    This guy shows how it can be called from the JS side:

    http://stackoverflow.com/questions/8335834/how-can-i-hide-the-android-keyboard-using-javascript
  • Thanks rsanchez1 those links got me headed in the right direction. Looks like this maybe related to some known Android bugs related to text input in a webview (which phonegap apps run in). Looks like there may be some things to try to get around this.
  • Am I missing something, but does this not work well on iOS? You can't select text or place cursor where you tap
  • Well, I did it. I got it working, albiet with a hack. I hate hacks, so figuring out why a textarea inside Enyo will not show it as next on the field list and will not being up the soft keyboard, I would love to know.

    I had to use a plugin to show/hide the keyboard: https://github.com/nikhilben/phonegap-plugins/tree/master/Android/SoftKeyboard

    Then, I used my modified Input kind (into a Textarea kind) and the onFocus/onBlur to show hide the VKB. It's a hack, but it actually works.
  • Great, nice to know that showing the keyboard would work to type in the textarea.
  • @ IngloriousApps ~ i can't select text nor place cursor in iPad as well , but I am using RichText :(
Sign In or Register to comment.