When ModalPanel opens in iFrame, scroll bar moves up

[apanag]

I have a page which has an iframe (iframe scrolling = disabled).

The iframe page contains among others a RichFaces modalPanel.

(In case that the outer scrollbar is visible) when I open the modalPanel the scroll bar moves up, so that the top of the iframe is visible.

I don't know how to disable this behaviour without changing the modalPanel.js.

The reason this happens is:

The modalPanel.js has in the show() method the command:

this.lastOnfocus();

This command set the focus on the this.lastHref (id + "LastHref") component which is a hidden button placed on top of the page that contains the modalPanel.

Does anybody knows how to disable this.lastOnfocus

To be honest, I haven't investigated what the lastOnfocus offers, but common sense says it is needed.

For the time being there is no "parameter" to regulate whether this.lastOnfocus is called.

What do you think of creating a parameter that enables/disables lastOnfocus?

[ilya_shaikovsky]

show the code of the control which opens the panel.

[apanag]

<h:outputLink id="myOutputLink" >
    <h:outputText value="Show Modal Panel" />
    <rich:componentControl for="myModalPanel" attachTo="myOutputLink" 
            operation="show" event="onclick" disableDefault="true" />
</h:outputLink>

thanks

[ilya_shaikovsky]

this works for me just as you showing.

<h:outputLink value="#" id="link">
Show Modal Panel
<rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
</h:outputLink>

but this

<h:outputLink value="#" id="link">
     Show Modal Panel
     <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick" disableDefault="true"/>
</h:outputLink>

works fine.

[apanag]

It's clear that the disableDefault makes the difference. But I already use it.

Have you tried it within an iframe?

It is then the this.lastOnfocus();  command in show method of modalPanel.js that moves the scrollbar to the top.

[nbelaevski]

Andreas,

If you disable lastOnFocus/firstOnFocus, then you will be able to set focus to and modify controls masked by tabPanel via focus-switching (e.g. TAB) key.

[apanag]

great. thanks, I 've studied the case you mention.

In the video I 've uploaded in this thread, the this.lastOnfocus() makes the scrollbar move up.

This happens because the LastHref button is higher on the page (even though it is hidden). The focus() command forces the scrollbar go up in order to display the button.

I think this is undesired behaviour, not only in my case.  Do you agree?

I suggest moving the LastHref button in the ContentTable.

What do you think? Are there any conflicts by this move that I am not aware of?

If not, I would be happy to change and test the code I mention and then commit it.

In order to quickly test, I have already added an additional button in the modalpanel's content and replaced the lastOnfocus command in modalPanel.js with $("my_focus_button").focus();

It worked fine.

[nbelaevski]

Yes, it should be working fine as the last element of contentTable or contentDiv. Here is the JIRA issue I've created for the problem: https://jira.jboss.org/jira/browse/RF-8590

[mechtatel]

Hi,

I have the same problem, so I modified the source moving:

<div class="rich-mpnl-mask-div rich-mpnl-mask-div-transparent" id="#{clientId}CursorDiv" style="z-index: -200;">

  <button class="rich-mpnl-button" id="#{clientId}LastHref"></button>

</div>

as last element of contentDiv.  And works well. But after trying it in Internet Explorer 8 I received JS error apointing to modalPanel.js

this is the JS error:

Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus

How can this be solved?