Help: input inside of popUpMenu - JS exception in Firefox
Hi all,
i'm tying to put an input element inside of <rich:menuItem>.
http://www.voller-ernst.de/paul/popup.gif
It works great in IE but throws the following JS exception in Firefox:
Firebug console:
----------------------
in: a4j_3_1_4.GAorg.ajax4jsf.javascript.AjaxScript.faces
[Exception... "'Die Erlaubnis für den Aufruf der Methode HTMLDivElement.compareDocumentPosition wurde verweigert'
when calling method: [nsIDOMEventListener::handleEvent]"
nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)"
location: "" data: no]
(Message translated is something like: "Call to ... not permitted")
getElementsByTagName("INPUT", span#ajax-view-state) (line 36)
processResponse(Object _query=Object _documentElement=html options=Object) (line 77)
getParseErrorText()
----------------------
enviroment: RichFaces3.1.4GA / Firefox 2.0.0.12
Exception is thrown 3 times after mouse entering the input's rectangle and then 3 times on mouse out (maybe it is mouseover of underlying menu item element?). Anyway this exception seems to break the chain of menu's mouse event handlers and the menue becomes not hidden even if mouse pointer leaves the menue rectangle. Normal "behaviour" is then restored again on any successfull mouseover event of menue. Another side effect is that if this ocures inside of shown menuGroup (see screenshot), this group becomes hidden, but the focus remains by focused input (if some was focused) and the keyboard events are still sent to it.
The same effect is also if i place any form input element in other rich popup elements such as ToolTip.
My code is like this:
<a4j:form>
<rich:dropDownMenu id="menu#{ContainerList.humanName}" submitMode="none" value="Test">
<!-- RENAME CONTAINER -->
<rich:menuItem submitMode="none" rendered="#{ContainerList.current.nameEditable}">
<f:facet name="icon">
<h:graphicImage value="module/gridoptionbar/images/red_edit.gif" />
</f:facet>
<!-- input -->
<h:inputText value="#{ContainerList.humanName}" id="edContainerName" />
<!-- invisible default submit button to hanle "Enter" -->
<a4j:commandButton actionListener="#{ContainerList.stateChangeListener}" value=""
image="tools/images/spacer.gif"
reRender="#{MyController.reRendered}"/>
</rich:menuItem>
...
<!-- EMAIL -->
<rich:menuGroup value="Email">
<f:facet name="icon">
<h:graphicImage value="module/gridoptionbar/images/red_email.gif" />
</f:facet>
<rich:menuItem submitMode="none" disabled="true" value="#{gridstrings.mail_to}:">
<h:inputText value="#{ContainerList.current.mailTo}" />
</rich:menuItem>
<rich:menuItem submitMode="none" disabled="true" value="#{gridstrings.mail_cc}:">
<h:inputText value="#{ContainerList.current.mailCC}" />
</rich:menuItem>
<rich:menuItem submitMode="none" disabled="true" value="#{gridstrings.mail_message}:" />
<rich:menuItem submitMode="none" disabled="true" value="" >
<h:inputTextarea value="#{ContainerList.current.mailBody}" />
</rich:menuItem>
<rich:menuItem submitMode="ajax" actionListener="#{ContainerList.current.emailListener}"
value="#{gridstrings.btn_send}"
reRender="#{MyController.reRendered}"
oncomplete="#{! empty facesContext.maximumSeverity ? 'DoMessagePopUp()' : ''}">
<f:facet name="icon">
<h:graphicImage value="module/gridoptionbar/images/red_right.gif" />
</f:facet>
</rich:menuItem>
</rich:menuGroup>
</rich:dropDownMenu>
</a4j:form>
Is there any solution or workaround for this problem?
Regards,
paul
