Unable to get force:inputField or force:outputField to render inside other markup in Lightning Component when used in Lightning Experience

I’ve created a Lightning component to view key details for the Account and Contact lookups from a Case, like so:

enter image description here

The problem is, I have been unable to get field content to render when using the <force:inputField/> or <force:outputField/> components when I place them inside the markup to style them as cards. I’ve used <ui:outputText/> as a workaround, but that means I don’t get any of the built-in behaviors I would get with the <force:*Field/> components — like Lightning styling, which means I have to manually do it using SLDS.

This displays the contact name as expected:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="LightningCaseTestController">
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <aura:attribute name="recordId" type="Id" />
  <aura:attribute name="contact" type="Contact" default="{sobjectType: 'Contact'}"/>

  <force:outputField value="{!v.contact.Name}"/>
  <force:inputField value="{!v.contact.Name}"/>

</aura:component>

This does not:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="LightningCaseTestController">
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <aura:attribute name="recordId" type="Id" />
  <aura:attribute name="contact" type="Contact" default="{sobjectType: 'Contact'}"/>

  <article>
    <force:outputField value="{!v.contact.Name}"/>
    <force:inputField value="{!v.contact.Name}"/>
  </article>

</aura:component>

Basically, it appears that as soon as any markup is placed around the <force:*Field/> tags — even just a <div> — they no longer render. Examples in Trailhead and other places all seem to use <ui:outputText/> or <ui:input*/>.

This seems like a lot of extra manual work. Am I missing something?

Update: it only fails when the component is included in a Lightning page — such as the record detail page — from Lightning App Builder. If I add it to a simple Lightning app, it works:

<aura:application >
    <c:LightningCaseTest recordId="SOMECASEID" />
</aura:application>

So it appears to be a bug?

Answer

I just heard from Farhan Tahir, the product manager for Aura. He’s confirmed that it is in fact a bug (W-3342864).

UPDATE: the bug’s been nevered. PM guidance is to “use lightning namespaced components. force:inputField should be replaced with lightning:inputField (or even better with lightning-input-field, which is the LWC version).”

Attribution
Source : Link , Question Author : shannonsans , Answer Author : shannonsans

Leave a Comment