Skip to main content
5 of 5
added 109 characters in body
Jason Benkert
  • 2.2k
  • 3
  • 18
  • 32

target.getSource() not working for ui:inputNumber in Lightning Component

I have a component that displays several different input types, such as ui:inputText and ui:inputNumber. Each input uses an change="{!c.handleChange}" attribute.

In my controller, the handleChange method then gets the value of the field. However, ui:inputNumber fields aren't working. The sandbox I'm in was just updated to Winter 18 - so wondering if this has something to do with it.

Here's my component snippet:

<ui:inputText change="{!c.handleChange}" />
<ui:inputNumber change="{!c.handleChange}" />

And in my controller:

handleChange : function(component,event,helper){
    // this works fine for all types except inputNumber
    console.log(event.getSource().get('v.value'));
}

Using the above, ui:inputNumber results in undefined. I've also tried the old event.target.value, however event.target is undefined.

Any thoughts?

EDIT: Adding entire component for context. I'm dynamically generating the inputs based on a Fieldset, this component get spun up for each input that needs to be displayed. It creates the input field based on the definitions passed to it.

Here's my component controller:

({
doInit : function(component, event, helper) {
    // make the field component.
    $A.createComponent(component.get('v.fieldDefinition'), component.get('v.fieldAttributes'),function(cmp,status,error){
        if(component.get('v.fieldDefinition').startsWith('ui:')){
            // need to add a handler for standard ui: components.  custom components register them on their own.
            cmp.addHandler('change',component, 'c.handleFieldUpdated');
            
            // note: inputDate field does not support "onchange" events.
            if(component.get('v.callbacks') != null){
                for (var c in component.get('v.callbacks')){
                    var cb = component.get('v.callbacks')[c];
                    cmp.addHandler(c,component,cb);
                }
            }
        }
        component.set('v.cmp',cmp);
    });
},
handleFieldUpdated : function(component,event,helper){
    // event: FieldValueUpdated
    var evt = component.getEvent("valueUpdated");
    var val = event.getSource().get('v.value');
    console.log(event.getSource());
    console.log(val); // this is undefined for ui:inputNumber
    evt.setParams({
        fieldPath : component.get('v.fieldAttributes.fieldPath'),
        value : val
    });

    evt.fire();
}

})

And here's the component:

<aura:component >
    <aura:attribute name="cmp" type="Aura.Component" />
    <aura:attribute name="fieldDefinition" type="string" />
    <aura:attribute name="fieldAttributes" type="object" />
    <aura:attribute name="callbacks" type="object" />
    <aura:registerEvent name="valueUpdated" type="c:FieldValueUpdated" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    {!v.cmp}
</aura:component>

EDIT: I've opened a case with Salesforce support to see if they can resolve this issue. Case #17249103

Jason Benkert
  • 2.2k
  • 3
  • 18
  • 32