Command button does not submit on "enter" press only in IE < 9

Question

I have 2 <h:form> elements following each other (not one within the other) such as :

<h:form id="innerHeaderForm1">
    <h:inputText value="#{searchBar.eventname}" />
    <h:commandButton action="#{searchBar.search1}" value="click1"/>
</h:form>
<h:form id="innerHeaderForm2">
    <h:inputText id="last" value="#{searchBar.personname}"/>
    <h:commandButton action="#{searchBar.search2}" value="click2"/> 
</h:form>

This works fine. The problem I have is that in IE 8 (and I'm assuming other older versions) when in the first form and I hit the "enter" key on my keybord, the form is not submitted. The page reloads, but does not even call #{searchBar.search1}.

The odd thing in all this is that this works fine in the second form. I don't get an error message nor do I get any feedback from the browser.

In my backing bean I have something of the sort :

public String search1() {
    System.out.println("submitting form1");
    return "success";
}

public String search2() {
    System.out.println("submitting form2");
    return "success";
}

When using hitting the "enter" key, I don't even make it to the backing bean.

But : when I do "click" the submit button (with the mouse) everything works.

Any insight on this would be greatly appreciated!

Answer 1

This is a MSIE specific anomaly in case of forms with only one <input type="text"> field. The only fix is to add another <input type="text"> field which is hidden by CSS display: none;.

<h:form id="innerHeaderForm1">
    <h:inputText value="#{searchBar.eventname}" />
    <h:inputText style="display: none;" />
    <h:commandButton action="#{searchBar.search1}" value="click1"/>
</h:form>

This problem is not related to JSF.