title: JSF: Bean property keeps reverting to last tab values
body: <p>I added new tabs that contains input fields. However, for some reason, my managedbean could only store the values of the latest tab (Example tab 3) that was added. If I were to switch to an earlier tab (Example tab 2), and try to save the values, the stored value always reverts to the input field values of the last tab. There are absolutely no clear solutions on this from searching in the forums, both stackoverflow and primefaces forum. To reiterate, here is a detailed walkthrough:</p>
  
  <ol>
  <li>TabView -> Add new tab (tab 1)</li>
  <li>Save t1, f1, c1 under tab 1 (Success)</li>
  <li>Add new tab (tab 2)</li>
  <li>Add new tab (tab 3)</li>
  <li>Save t3, f3, c3 under tab 3 (Success)</li>
  <li>Select tab 2</li>
  <li><p>Save t2, f2, c2 under tab 2 (Failed) -> Result: tab 2 values saved as tab 3 values (t3, f3, c3)    </p>
  
  <p>
  
  </p>
  
  <pre><code>&lt;ui:composition template="/template/StakeholderTemplate.xhtml"&gt;
  
      &lt;ui:define name="top"&gt;
          &lt;h2&gt;Customer Information Data Entry&lt;/h2&gt;
      &lt;/ui:define&gt;
  
      &lt;ui:define name="contentInsert"&gt;
          &lt;p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/&gt;  
          &lt;p:dialog modal="true" widgetVar="statusDialog" header="Status"   
                    draggable="false" closable="false" resizable="false"&gt;  
              &lt;p:graphicImage value="/adminItem/images/ajaxloading.gif" /&gt; 
          &lt;/p:dialog&gt; 
  
          &lt;h:form id="form"&gt;
  
              &lt;p:growl showDetail="true" /&gt; 
  
              &lt;h:panelGrid columns="1"&gt;
  
                  &lt;p:commandButton value="Add tab" process="@this" update="tw" actionListener="#{backMicroPortalMB.addTab}"&gt;
                  &lt;/p:commandButton&gt;
                  &lt;p:growl id="tabsave" showDetail="true" /&gt;
                  &lt;p:tabView id="tw" style="width:100%" activeIndex="#{backMicroPortalMB.activeIndex}" value="#{backMicroPortalMB.unstructuredTabs}"  var="tab"  dynamic="true" cache="false"&gt;
                      &lt;p:ajax event="tabChange" process=":form" listener="#{backMicroPortalMB.onTabChange}"/&gt;
  
                      &lt;p:tab title="#{tab.tabTitle}" closable="true"&gt;
  
                          &lt;h:outputLabel for="tabTitle" value="Please key in tab title:" /&gt;
                          &lt;h:inputText id="tabTitle" value="#{backMicroPortalMB.tab.tabTitle}"/&gt;
                          &lt;br/&gt;
  
  
                          &lt;h:outputLabel for="fieldTitle" value="Please key in field title:" /&gt;
                          &lt;h:inputText id="fieldTitle" value="#{backMicroPortalMB.opt.fieldTitle}" /&gt;&lt;br/&gt;
  
                          &lt;h:outputLabel for="contentTitle" value="Please key in content:" /&gt;
                          &lt;p:editor id="contentTitle" value="#{backMicroPortalMB.opt.content}" width="600"/&gt;&lt;br/&gt;
  
                          &lt;p:commandButton value="Save" update="@form" action="#{backMicroPortalMB.saveTab}" /&gt;
  
                      &lt;/p:tab&gt;  
                  &lt;/p:tabView&gt;
                  &lt;p:commandButton id="panel" value="Add" action="#{backMicroPortalMB.createMicroPortal}"/&gt;  
              &lt;/h:panelGrid&gt;
          &lt;/h:form&gt;
  
      &lt;/ui:define&gt;
  
  &lt;/ui:composition&gt;
  </code></pre>
  
  <p></p></li>
  </ol>
  
  <p>Bean code:</p>
  
  <pre><code>@ManagedBean
  @ViewScoped
  public class BackMicroPortalMB {
  
  public void addTab(ActionEvent action) {
  
          FacesContext ctx = FacesContext.getCurrentInstance();
          ExternalContext ectx = ctx.getExternalContext();
  
          String url = "A tab";
  
          TabView tw = (TabView) ctx.getViewRoot().findComponent("form2:tw");
          TempTab tab = new TempTab();
          tab.setTabIndex(unstructuredTabs.size());
          tab.setTabTitle("new Tab");    
          unstructuredTabs.add(tab);
  
      }//add new Tab
  
  public void onTabChange(TabChangeEvent event) {
  
          FacesContext ctx = FacesContext.getCurrentInstance();
          ExternalContext ectx = ctx.getExternalContext();
  
          TempTab tab = this.unstructuredTabs.get(activeIndex);
  
          this.tab.setTabTitle(tab.getTabTitle());
          this.opt.setFieldTitle(tab.getOptField().iterator().next().getFieldTitle());
          this.opt.setContent(tab.getOptField().iterator().next().getContent());
  
          // FacesMessage msg = new FacesMessage("Tab Changed", "Active Tab: " + event.getTab() + this.selectedIndex);  
  
          // FacesContext.getCurrentInstance().addMessage(null, msg);  
      }
  
  public void saveTab() {
  
          FacesContext ctx = FacesContext.getCurrentInstance();
          Long stakeholderId = (Long) ctx.getExternalContext().getSessionMap().get("stakeholderId");        
          TempTab currentTab = this.unstructuredTabs.get(activeIndex);
          currentTab.setTabTitle(this.tab.getTabTitle());
          Collection&lt;OptionalField&gt; optFieldList = new ArrayList&lt;OptionalField&gt;();        
          optFieldList.add(this.opt);
          currentTab.setOptField(optFieldList);
  
          FacesMessage msg = new FacesMessage(tab.getTabTitle() + " Saved!");
  
          ctx.addMessage(null, msg);
      }//add new Tab   
  }
  </code></pre>
  
  <p>I've searched at the PrimeFaces form and the only helpful reply I have got was to google viewscoped and tabview. However, what exactly is the issue here? I'm really new to PrimeFaces and JSF and would really appreciate advice.</p>
  
  <p>PrimeFaces 3.3
  JSF 2.1
  Glassfish 3.1.2</p>