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

Question

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>

score 0 · Accepted Answer · answered Sep 03 '21 at 11:31

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)

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

1 Answers1