Search code examples
sassfreemarkerliferay-7liferay-7.3

Liferay 7.3.2: Aria-expanded stuck on true after changing a page


I have few dropdowns on my page, with buttons opening and closing a dropdown. Everything goes well after initial page load, but after changing to a different page, the dropdown opens with a click, but never closes. It seems that button's aria-expanded is stuck on true and the dropped down div has classes collapse open, which tries to collapse but won't ever do it (clicking the button gives the div collapsing class and then returns).

I have no idea why this happens and and if it's got to do with Liferay, freemarker, css or any of those...

This is my application display template:

<div id="a_language_selector">
    <button
        aria-controls="a_language_list"
        aria-expanded="false"
        role="button"
        data-toggle="collapse"
        data-target="#a_language_list"
    >
        <!-- CHANGE THIS -->
        <@liferay.language key="EN" />
    </button>

    <ul
        id="a_language_list"
        class="panel-collapse collapse"
        aria-labelledby="a_language_list"
    >
        <#if entries?has_content>
            <#list entries as navigationEntry>
                <li aria-label="${navigationEntry.getName()}">
                    <a href="${navigationEntry.getURL()}">
                        ${navigationEntry.getName()}
                    </a>
                </li>
            </#list>
        </#if>
    </ul>
</div>


Solution

  • The answer was found and has to do with Liferay's own javascript (SennaJS)!

    Changing a page in Liferay doesn't update the whole site and leaves old information lying around the session, breaking the collapsing.

    I added this line to my portal-ext.properties and while it now loads after all page changes, it works well!

    javascript.single.page.application.enabled=false 
    

    More information found here (help.liferay.com)