Richfaces-3.3.1 and ModalPanel re-render on Safari

[abafna]

All,

I am using ModalPanel component to allow users to change their passwords. When new password criteria is not met, the modal panel is re-rendered with proper error message. Below is the code:

<rich:modalPanel id="resetPasswordPanel" height="200" width="480"
 showWhenRendered="#{userAdmin.showResetPasswordPanel}">
 <f:facet name="header">
 <h:outputText value="Reset Password"></h:outputText>
 </f:facet>

 <h:outputText value="Please select a new password for #{userAdmin.selectedUser.username}" />

 <br/><rich:spacer height="10"/>

 <s:decorate id="resetNewPasswordDecoration" template="layout/edit.xhtml">
 <ui:define name="label">New Password</ui:define>
 <h:inputSecret id="resetNewPasswordInput" value="#{userAdmin.newPassword}" redisplay="true">
 <a4j:support ajaxSingle="true" event="onblur" />
 </h:inputSecret>
 </s:decorate>

 <s:decorate id="resetConfirmPasswordDecoration" template="layout/edit.xhtml">
 <ui:define name="label">Confirm Password</ui:define>
 <h:inputSecret id="resetConfirmPasswordInput" value="#{userAdmin.confirmPassword}" redisplay="true">
 <a4j:support ajaxSingle="true" event="onblur"/>
 </h:inputSecret>
 </s:decorate>

 <br/><rich:spacer height="10"/>

 <a4j:commandButton value="Reset Password" immediate="true"
 action="#{userAdmin.setPassword}"
 reRender="resetPasswordPanel, passwordChangedPanel"/>

 <a4j:commandButton value="Cancel" immediate="true"
 onclick="#{rich:component('resetPasswordPanel')}.hide()"
 action="#{userAdmin.resetShowResetPasswordPanel()}"
 reRender="resetPasswordPanel"/>

 <h:messages styleClass="errors" />
</rich:modalPanel>

This code was working fine on both, Safari & Firefox, when I was on richfaces-3.2.2.GA. However, since the upgrade to richfaces-3.3.1.GA, when an error is encountered, ModalPanel goes in hidden state and is not getting re-rendered on Safari. When page is re-loaded via a refresh, the modal panel appears on top because of back-end flag setting that I was not able to change because the modal panel was hidden. The same code works as expected on Firefox.

Is anyone else facing this problem?

Configuration:
JBoss - 4.2.3
Seam - 2.0.2
Richfaces - 3.3.1
Safari - 3.2.3
Firefox - 3.0.10

I think this is a bug. Anyone any thoughts?

Thanks
Amit

[ilya_shaikovsky]

I'm wondering about how this could works stable before, because modal panel by default has strict forms related limitation - it should have form inside in order to perform submits from it (so should be outside of external forms). And I could not see the form inside the modal panel within your snippet.

[abafna]

I cannot comment on how but it did work on richfaces-3.2.2.GA. It still works on Firefox with richfaces-3.3.1.GA. Additionally, after reading your remarks (and fine print from richfaces refernce guide ;)), I moved the above code outside of main form and added an internal form as follows:

<h:form>
...
...
...
</h:form>

<rich:modalPanel id="resetPasswordPanel" height="200" width="480"
 showWhenRendered="#{userAdmin.showResetPasswordPanel}">
 <f:facet name="header">
 <h:outputText value="Reset Password"></h:outputText>
 </f:facet>

 <h:form>
 <h:outputText value="Please select a new password for #{userAdmin.selectedUser.username}" />

 <br/>
 <rich:spacer height="10"/>

 <s:decorate id="resetNewPasswordDecoration" template="layout/edit.xhtml">
 <ui:define name="label">New Password</ui:define>
 <h:inputSecret id="resetNewPasswordInput" value="#{userAdmin.newPassword}" redisplay="true">
 <a4j:support ajaxSingle="true" event="onblur" />
 </h:inputSecret>
 </s:decorate>

 <s:decorate id="resetConfirmPasswordDecoration" template="layout/edit.xhtml">
 <ui:define name="label">Confirm Password</ui:define>
 <h:inputSecret id="resetConfirmPasswordInput" value="#{userAdmin.confirmPassword}" redisplay="true">
 <a4j:support ajaxSingle="true" event="onblur"/>
 </h:inputSecret>
 </s:decorate>

 <br/>
 <rich:spacer height="10"/>

 <a4j:commandButton value="Reset Password" immediate="true"
 action="#{userAdmin.setPassword}"
 reRender="resetPasswordPanel, passwordChangedPanel"/>

 <a4j:commandButton value="Cancel" immediate="true"
 onclick="#{rich:component('resetPasswordPanel')}.hide()"
 action="#{userAdmin.resetShowResetPasswordPanel()}"
 reRender="resetPasswordPanel"/>

 <h:messages styleClass="errors" />
 </h:form>
</rich:modalPanel>

but it still does not work on Safari.

Thanks
Amit

[zeppelinux]

I have problem with Modal Panel in Safari as well, but slightly different, - on the tall pages (more than two screens) in auto positioning mode it is rendered in the middle of page not screen, i.e. it is hidden somewhere below the viewport.
Page became totally locked because browser scroll can't be used to bring the modal panel up.

[ilya_shaikovsky]

abafna, try to reRender not the panel itself but its content.

Zeppelinux, please check the jira.. there are issues on modal panel and scrolls already reported. so just vote.

[abafna]

"ilya_shaikovsky" wrote:
abafna, try to reRender not the panel itself but its content.

ilya_shaikovsky,

Re-rendering the contents instead of modal panel did not help either on Safari. As soon as I press submit "Reset Password" button, modal panel disappears on Safari. To re-iterate, the code in its original form works just fine on Firefox.

Thanks
Amit

[zeppelinux]

Ilia,

I want to vote, but can't find the bug..

[zeppelinux]

Safari 4.1 is out, but the problem is still there and makes Safari totally unusable for my kind of application (tall form pages).

Link for the bug (or fix) will be much appreciated.

[dbernstein]

Hi Dmitry -  I'm having the same problem - did you ever resolve it?