Composite components with an h:form render in a weird way. This is the JSF markup I'm using:
<div id="modals">
<div id="modal1">
<custom:mycomp />
</div>
<div id="modal2">
<custom:mycomp />
</div>
<div id="modal3">
<custom:mycomp />
</div>
</div>
For some reason, instead of rendering each composite component inside its respective div, the source of the rendered HTML looks like this:
<div id="modals">
<div id="modal1">
<div class="modal-dialog"><!-- My rendered component --></div>
<div id="modal2">
<div class="modal-dialog"><!-- My rendered component --></div>
<div id="modal3">
<div class="modal-dialog"><!-- My rendered component --></div>
</div>
</div>
</div>
</div>
They are being rendered inside each other, not on the same level. I found out that removing the h:form inside my composite component fixes the issue, but I need it to trigger some actions. The composite component renders the markup for a Twitter Bootstrap modal:
<cc:interface></cc:interface>
<cc:implementation>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><!-- HEADER --></div>
</div>
<div class="modal-body">
<h:form>
<!-- My form. Removing this form renders the HTML correctly but I need it to invoke some actions here -->
</h:form>
</div>
</div>
</cc:implementation>
I'm using Wildfly 8.0.0 Final. Is there something I'm missing or is this a bug in the JSF implementation? Any help is appreciated.
