Primefaces Dialog inside tab not working with modal="true" and appendto="@body"

The dialogs work fine when they are not inside any tab. But I have some pages inside tabs and in those pages, if I make modal="true" and @appendto="@body", I do not see my changes done on the dialog in the bean. But if I make modal="false", the changes work fine, its just that I want my dialog to be modal. Can anyone suggest what to do? I have a home page where the tabs are defined

  <p:tabView dynamic="true" cache="false" id="tabView" style="margin-top:30px;">
                    <p:ajax event="tabChange"                           
                            listener="#{bean.onTabChange}"/>
                    
                    <p:tab id="homeTab" title="Account">
                        <ui:include src="work/tab1.xhtml"/>
                    </p:tab>
                    
                    <p:tab id="Tab1" title="Payments">
                        <ui:include src="work/tab2.xhtml"/>
                    </p:tab>
                </p:tabView>

In tabView, tab1.xhtml, I have a dialog which has input text, selectOneMenu and a datatable to edit as well. Whenever I add any value or change, I see that the changed values are not saved in the bean. I had to add an ajax event change listener and get the changed vaklue in bean like this

<p:selectOneMenu value="#{bean.name}" styleClass="menu" update= "@this" panelStyleClass="panel"
                                     style="width:255px;background-color:#E5FBFF;color:#0E66EE;font-family:Verdana, Geneva, sans-serif;">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItems value="#{bean.name}" />
                        <p:ajax event="change" partialSubmit="true"  update= "@this" listener="#{bean.nameChangeListener}"/>
        </p:selectOneMenu>

In bean the listener is as below,

public void nameChangeListener (AjaxBehaviorEvent event) {
        Object val = ((UIInput)event.getSource()).getValue();
        name = (String)val;
     
    }

After all this, I am able to see the changes and I'm able to save them even when I make my dialog modal and add appendTo="@(body)"

Now the issue is in changing the datatable . I have a dropdown in just one of the cells which I need to change, But I don't know how will I know what row was changed. Because I have to save the whole row in the DB. Please help.

I also have another dialog which has just a datatable and all the columns can be edited. I want to know how can I know the row in which the change has been made

Solution

As suggested by @melloware, I could solve it by moving the dialogs in a separate xhtml file in a new form as below.

<h:form id="pForm">
    
    <p:dialog  dynamic="true" header="Add" widgetVar="testDialog" resizable="false" showHeader="true" closable="true"  width="58%" height="100%" modal="true">
          <!-- ****************Dialog Content*************** -->
      update=:mform:AddGrid  <!-- ****This is on my main xhtml page**** -->
      </p:dialog>
   </h:form>

I had to include this file in the file where I had all the tabviews defined. See Below

 <h:form id=mform>
     <p:tabView dynamic="true" cache="false" id="tabView" style="margin-top:30px;">
             <p:ajax event="tabChange"                           
                listener="#{bean.onTabChange}"/>
                    
             <p:tab id="homeTab" title="Account">
                 <ui:include src="work/tab1.xhtml"/>
             </p:tab>
                    
             <p:tab id="Tab1" title="Payments">
                 <ui:include src="work/tab2.xhtml"/>
             </p:tab>
         </p:tabView>
     </h:form>
 <ui:include src="dialogs.xhtml"/>