Unable to get textarea value with LockerService

Question

Very straightforward, I have a textarea element in my component which I need to get the value of.

TestApp.app

<aura:application >
    <ltng:require scripts="{!$Resource.jquery}" afterScriptsLoaded="{!c.doInit}" />
    <aura:attribute name="textcount" type="Integer" default="0"/>
    <div id="textcounter" class="slds-text-body--small" >{!v.textcount}/10000</div>
    <textarea aura:id="message-input"  maxlength="10000" class="slds-input" type="text" id="message-input"  />
</aura:application>

TestAppController.js

({
    doInit : function(cmp, event, helper) {
        $('#message-input').bind('keyup click blur focus change paste',function() {
            console.log("JQuery test");
            console.log($('#message-input'));
            console.log($('#message-input').toString());
            console.log($('#message-input').val());
            console.log($('#message-input').value);
            console.log("Javascript test");
            console.log(document.getElementById('message-input'));
            console.log(document.getElementById('message-input').toString());
            console.log(document.getElementById('message-input').value);
            console.log("Aura test");
            console.log(cmp.find('message-input'));
            console.log(cmp.find('message-input').getElement());
            console.log(cmp.find('message-input').getElement().value);
            cmp.set("v.textcount", $('#message-input').val().length);
        });
    } 
})

Output with LockerService off.

app.js:825 JQuery test
app.js:826 [textarea#message-input.slds-input, context: document, selector: "#message-input"]
app.js:827 [object Object]
app.js:828 mytext
app.js:829 undefined
app.js:830 Javascript test
app.js:831 <textarea class=​"slds-input" maxlength=​"10000" type=​"text" id=​"message-input" data-aura-rendered-by=​"8:​2;​a">​</textarea>​
app.js:832 [object HTMLTextAreaElement]
app.js:833 mytext
app.js:834 Aura test
app.js:835 componentConstructor {$concreteComponentId$: undefined, $shouldAutoDestroy$: true, $rendered$: true, $inUnrender$: false, $localId$: "message-input"…}
app.js:836 <textarea class=​"slds-input" maxlength=​"10000" type=​"text" id=​"message-input" data-aura-rendered-by=​"8:​2;​a">​</textarea>​
app.js:837 mytext

output with LockerService on

components/mynamespace/TestApp.js:11 JQuery test
components/mynamespace/TestApp.js:12 [Object, context: Object, selector: "#message-input"]
components/mynamespace/TestApp.js:13 [object Object]
components/mynamespace/TestApp.js:14 
components/mynamespace/TestApp.js:15 undefined
components/mynamespace/TestApp.js:16 Javascript test
components/mynamespace/TestApp.js:17 Object {jQuery224047175119781793451: Object}
components/mynamespace/TestApp.js:18 SecureElement: [object HTMLTextAreaElement]{ key: {"$namespace$":"mynamespace"} }
components/mynamespace/TestApp.js:19 undefined
components/mynamespace/TestApp.js:20 Aura test
components/mynamespace/TestApp.js:21 Object {}
components/mynamespace/TestApp.js:22 Object {jQuery224047175119781793451: Object}
components/mynamespace/TestApp.js:23 undefined

With LockerService off, everything works well and the value updates according to the length of the textarea's value. With LockerService on, it's always 0.

When using an input element, the text is fetched correctly , but when using a textarea, it does not fetch the text.

Answer 1

The value property of textarea has just been whitelisted and should be available next week.

Answer 2

See my comment above but if you want a functional workaround - which is also more in line with the direction Lightning is going in general - you could use the built-in ui:textarea component and bind an attribute to its value. Then don't use jQuery at all to get its value but just fetch the attribute using component.get.