APEX jQuery Modal Dialog Oddities

Lately I have been working on creating a new version of my demo application for the APEX IR XLSX Downloader.
The package provides a set of configuration parameters which I thought would be nice to present to the user instead of being solely defined by the developer.
During that I encountered some oddities when using a jQuery Modal Dialog to render a region as a modal dialog.

Note: I'll show you the steps to reproduce and fix in a newly created application. But you can also just create a new page in an existing application.

Steps to reproduce and fix:

1. Navigate to the page where you want to put the modal region containing form elements.
2. Create a new region accepting all defaults
3. Create a button in that region and set Action to "Defined by Dynamic Action"
   
   
   
4. Create a new region accepting defaults except for "Display Attributes"
   Select "jQuery Modal Region Template" as "Region Template"

5. Create at least one item which should save session state on the modal region.
   I used a text item and made it submit on enter for this example.
   
   
6. Create the dynamic action reacting to button click.
   
   
   
   
   
   
   
   


7. Run a simple test
1. Run the page
2. Click open Dialog button
3. Enter something in the text field and hit enter.
4. Now verify session state
   
   
5. So we submitted the page with a new value in the item, but it doesn't look like it was pushed into session state.
8. Finding the reason for session state not being updated.
1. Analyze DOM before dialog open.
   
   
2. Analyze DOM after dialog open.
   
   
9. This tells us that the region gets moved outside of the <form> container, making the item invisible to APEX.
   Therefore no update in session state.
10. Steps to fix DOM
    1. Create Dynamic Action which fires "Before Page Submit"
    2. Set action to "Execute Javascript Code":
       

       apex.jQuery( this.affectedElements ).dialog( "destroy" ).appendTo( 'form#wwvFlowForm' );
       

    3. Set "Affected Elements" identical to previous Dynamic Action.
11. Test again with same steps as noted in 7.
    This should now work.
    
    
    
    
    
    
    
12. Enjoy nicely working modal dialogs.