2

I have Lightning Parent component that has three inner Lightning components:

<aura:component>
   <c:searchComponent/>
   <c:newRequest/>
   <c:requestsList/>
<aura:component>

c:newRequest component has several force:inputField components to display fields for New Request. Based on search query in c:searchComponent I want to show/hide c:newRequest or c:requestList. To implement that I added new event to call function with addClass/removeClass. Markup:

<aura:component>
   <c:searchComponent/>
   <div aura:id="newRequest">
      <c:newRequest/>
   </div>
   <div aura:id="requestsList">
      <c:requestsList/>
   </div>
<aura:component>

Toggle logic works great but now I can't see force:inputField components! I tried to remove div aura:id="newRequest" and force:inputField components displayed correctly. Is that Lightning issue? What is the best practice to handle similar functionality?

0

Try to use lightning:input instead of force:input. There's a bug in this components.

In another hand, this component doesn't inherit the Lightning Design System styling. Use lightning:input if you want an input field that inherits the Lightning Design System styling.

If you needs to add some layouts to divide with custom classes, use lightning:layout & lightning:layoutItem, that works like bootstrap config.

0

I found that is Salesforce Known issue.

Workaround is to create apex method to get picklist values from the schema and add them to the lightning:select component using iteration.

Not the answer you're looking for? Browse other questions tagged or ask your own question.