When update an accordion It doesn't hold the open/closed tab - html

Question

I have a big problem with Primefaces accordion.
I have an outputPanel with an header and an accordion with 2 tabs.
If I close the first tab and change a field in the second tab, it open the first tab and close the second. How can I keep the status of the tabs?
This is a simple example:
<p:outputPanel id="content">
<p:outputPanel id="header" />
<p:accordionPanel multiple="true">
<p:tab title="firstTab">
<p:panel>
<p:inputText id="firstInput" value="firstInput">
<p:ajax event="change" update="content" />
</p:inputText>
</p:panel>
</p:tab>
<p:tab title="secondTab">
<p:panel>
<p:inputText id="secondInput" value="secondInput">
<p:ajax event="change" update="content" />
</p:inputText>
</p:panel>
</p:tab>
</p:accordionPanel>
</p:outputPanel>
How can i resolve it? Any suggestion?

Answer 1

AccordionPanel has an attribute called activeIndex, you could set this attribute from your MB so it doesn´t change after an update. See for instance https://www.primefaces.org/docs/vdl/6.1/core/primefaces-p/accordionPanel.html

Answer 2

Based on cagatay civici's answer provided in the link by #Christian I created a simple example, because it was not working out of the box for me.
The example.xthml:
<h:form styleClass="accordionForm">
<p:accordionPanel multiple="true"
activeIndex="#{sessionBean.activeTabs}">
<p:ajax event="tabChange" />
<p:ajax event="tabClose" />
<p:tab title="Tab1">
<p:panel>
<p:inputText id="firstInput" value="firstInput">
<p:ajax event="change" update="#(.accordionForm)" />
</p:inputText>
</p:panel>
</p:tab>
<p:tab title="Tab2">
<p:panel>
<p:inputText id="secondInput" value="secondInput">
<p:ajax event="change" update="#(.accordionForm)" />
</p:inputText>
</p:panel>
</p:tab>
</p:accordionPanel>
</h:form>
The sessionBean.java:
#Named("sessionBean")
#SessionScoped
public class SessionBean implements Serializable {
private static final long serialVersionUID = 1L;
private String activeTabs = "";
public String getActiveTabs() {
return activeTabs;
}
public void setActiveTabs(String activeTabs) {
this.activeTabs = activeTabs;
}
}
Explanation:
The two p:ajax tags trigger a POST request if a tab is either opened ("tabChange") or closed ("tabClosed"), since this is the default action for the accordionPanel. Hence, I wrapped the p:accordionPanel with an h:form. If you inspect your network traffic you can see how the list of active tabs is sent to the server.
Bear in mind that I update the surrounding form instead of the accordionPanel itself. Therefore, I use Primefaces Selectors.