[SalesForce] Lightning Component retrieving text value

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.

Best Answer

The problem is the updateOn attribute. The default is change, but you action is being called on keyUp wich is before. You need to add the updateOn="keyup" attributte to your input text.

<ui:inputText class='filter' aura:id='filterFieldName' placeholder='{!v.filterFieldName}' value='{!v.filter}' keyup='{!c.updateUsers}' updateOn="keyup"/>
Related Topic