Component set() does not work on lightning:inputField if user changes the field value

Question

I'm finding the component.set method only works on lightning:inputField components when the user has not changed the value in that field. See code example below.

Component:

<lightning:recordEditForm aura:id="editForm"  objectApiName="Account" recordId="0010G00002JEU4OQAX" > 
    <lightning:inputField fieldName="Rating" onchange="{!c.setDemoValue}" />
    <lightning:inputField aura:id="nom" fieldName="Name" />
</lightning:recordEditForm>

Controller:

({ setDemoValue : function(component, event, helper) { console.log('before value: ', component.find('nom').get('v.value')); component.find("nom").set("v.value", "temp"); console.log('after value: ', component.find('nom').get('v.value')); } })

If you change the "Rating" once, you can see the code work as expected. In the javascript console you can see it log out:

before value:
after value: temp

Now change the Name field from "temp" to "hello world", and change the rating again.

before value: hello world
after value: hello world

This seems like a defect to me (I would expect after value to be "temp"), but im not sure if there is a workaround or if I am doing something wrong. Thanks!

Answer 1

This is not the prettiest of workarounds, but, due to a similar problem I had faced in the past, I ended up hiding the inputFields display:none and using lightning:input fields when I rendered my component.

For example:

    <lightning:inputField fieldName="Subject" style="display:none;"/>
    <lightning:inputField fieldName="Description" style="display:none;"/>


    <lightning:input aura:id="test"  label="Subject" name="Case Subject" onblur="{!c.itemsChange}"/>

    <lightning:textarea label="Description" name="Case Description" maxlength="300" onblur="{!c.itemsChange}"/>

    <lightning:input type="checkbox" label="Clear" name="Clear" onchange="{!c.clear}"/>

and in my controller, i simply do what one would expect to work with a lightning:inputField

clear :  function(component, event, helper) {
    component.find("test").set("v.value", "");
},

Since the above 'leaves my inputFields hidden and unmodified, I actually have to populate the fieldnames on form submit:

handleRecordSubmit: function(component, event, helper) {
    event.getParams().fields.FIELDNAME = 'the lightning:input field value';
}

for what its worth, I know there are multiple known issues with the lighting:recordEdit form, and I wouldnt be surprised if this becomes one of them:

https://success.salesforce.com/issues_index?search=lightning%3AinputField

Looks like a similar known issue to :

https://success.salesforce.com/issues_view?id=a1p3A000000mDOkQAM