I've been working with a Lightning component that has me confounded. I have found a workaround for this issue temporarily, but I'd really like to figure out what is wrong here.
Here is the component markup in question:
<aura:component controller='ControllerHere' implements='flexipage:availableForAllPageTypes,force:hasRecordId' access='global'>
<ui:inputSelect aura:id="selUserType" multiple="false" class='userTypeSel' value='{!v.selUserType}'>
<ui:inputSelectOption text="Example1" label="Internal"/>
<ui:inputSelectOption text="Example2" label="External"/>
</ui:inputSelect>
<ui:inputText class='filter' aura:id='filterFieldName' placeholder='{!v.filterFieldName}' value='{!v.filter}' keyup='{!c.updateUsers}'/>
</aura:component>
The goal here is to filter a list of objects by typing into the ui:inputText. Now, getting the value of the selected option of the select list, works as expected using:
component.find('selUserType').get('v.value');
component.get('v.selUserType'); // this also works
The problem I'm having is retrieving the value of the ui:inputText element. Trying the same method used in retrieving the select list value is not working for me.
e.g.
component.find('filterFieldName').get('v.value'); // undefined
component.find('filterFieldName').get('v.text'); // undefined
component.find('filterFieldName').get('v.class'); // 'filter'
component.find('filterFieldName').get('v.required') // false
component.get('v.filter'); // undefined
The class attribute returns the correct class, however, all I need is the text the user typed. According to the documentation, I believe this method should work. I'm not sure what I'm doing wrong here. I've also found this link and this one which I'm assuming are the valid attributes for an input element within the framework. Any insight/nudge in the right direction would be appreciated.
As a note, the workaround I mentioned above was to use a standard html input element as opposed to a ui:inputText.
