[SalesForce] forceChatter:feed lightning component actions comment, share, edit buttons not working

Greetings and thanks for the read/advice!

Have a very basic application:

<aura:application extends="force:slds">
    <c.MyAPP_TopicFeed/>
</aura:application>

with a lightning component that looks like this:

<aura:component >
<div aura:id="feedContainer" class="feed-container">
    <forceChatter:feed type="Topics" subjectId="0TOC00000008eVX" />
</div>

Please note the subjectId is hardcoded to a valid topic in my org..

This component displays the following when rendered but the buttons and functions – comment, share, and edit features are not functional.

When I inspect the source and look at the action it appears that these methods are doing anything.. javascript:void(0)

<a title="Comment" href="javascript:void(0)" class="cuf-commentTrigger drillInTarget slds-post__footer-action">
<svg class=" slds-icon slds-icon-text-default slds-icon--x-small slds-align-middle ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/_slds/icons/v7.18.0/utility-sprite/svg/symbols.svg#share_post"></use>
</svg>
 Comment
</a>

Anyone know why this doesn't work and moreover how to make this standard component functional?

Thank you!!

Best Answer

The reason this is broken is because some of the events and functionality listen for events inside lightning frame .

Hence you will need to use app builder and create a page and add this component to get it functional .

You can test this without adding in lightning app builder or the community builder .

Related Solutions

[SalesForce] Carousel – lightning Component not working

You should be getting an error message in your browser console if a referenced script isn't loading as javascript would normally do and it should even tell you the method it referenced. To start with I would separate your include statements ( scripts separate from styling) as I've add issues when trying to include with one tag both, with js and css together; separate them and it should work.

As a side note: whenever possible try to keep the syntax provided by their documentation (the "join" when including multiple scripts) and if that doesn't include them one at a time to try and track the issue to one script. I think, at this point bootstrap is "vetted", and all the scripts I see should load fine so I'm almost certain it's the syntax. Here is a link to their include documentation. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_libs_platform.htm

Lightning Design System – Can SVG Icons Be Used Outside Those Provided by SLDS?

In your component markup put the SVG inside an CDATA container and surround it with DIV giving an aura:id.

<div aura:id="svg_content">
<![CDATA[
    <svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"/>
            <path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="#FFFFFF"/>
        </g>
    </svg>
]]>
</div>

Then in the renderer.js for the component, override the afterRender method:

afterRender: function(component, helper) {
    this.superAfterRender();
    var svg = component.find("svg_content");
    var value = svg.getElement().innerText;
    value = value.replace("<![CDATA[", "").replace("]]>", "");
    svg.getElement().innerHTML = value;        
}

This is a workaround that works for any SVGs outside of those provided by SLDS.

Related Topic