2

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

2 Answers 2

3

Looks like a bug to me.

After some investigations, it seems that the ui:inputNumber inherits from a component called: ui:inputSmartNumber

I think that they accidentally removed the public property of its value attribute.

Anyway, I was able to bypass this bug by using an another property of this component called elements which basically returns the input DOM element in its first index. So you can use the below code to get the value:

console.log(event.getSource().elements[0].value);

EDIT

Looks like this solution is not working if the component is not embedded in a record detail page.

7
  • Is there any formal documentation around event and what methods are available? event.getSource().getLocalId(), event.getSource().get('v.value'), etc - I can't find any actual documentation around that. Frustrating. Commented Sep 13, 2017 at 13:31
  • @JasonBenkert Sorry I couldn't find any. If this is helping, you have to tell you that the event.getSource() function basically returns the component itself. So besides the getLocalId() method, the get() method is supposed to return the available attributes of the component. Also, if you want to watch what are the availables properties, you can add a console.log(event.getSource()) statement. Commented Sep 13, 2017 at 13:38
  • The workaround you provided isn't working for me. I get a [Cannot read property '0' of undefined] error. Are you on W18? Commented Sep 13, 2017 at 13:39
  • Yes I am. I just changed your ui:inputNumber declaration to: <ui:inputNumber change="{!c.handleChange}" /> because it wasn't compiling. The onchange event doesn't exist on this component. Besides this, I'm in the same configuration. Commented Sep 13, 2017 at 13:44
  • Could you add a console.log(event.getSource()) to see if there is an elements property displayed as an array? Commented Sep 13, 2017 at 13:46
0

Update to this, it's been sent to the R&D group via a support case. Apparently they're able to reproduce this issue in both W18 and Summer 17 orgs, however I had this working in Summer 17 - and the switch to W18 broke the functionality. Since they're saying it's not a regression issue, it's taking a lower priority.

For anyone at Salesforce looking at this, my case # is 17249103

I'm waiting to see if they're going to make a Known Issue of it for tracking.

Edit: This was fixed in a patch release.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .