New Component: DefaultCommand

Which command to submit the form with when enter key is pressed a common problem in web apps not just specific to JSF. Browsers tend to behave differently as there doesn’t seem to be a standard and even if a standard exists, IE probably will not care about it. There are some ugly workarounds like placing a hidden button and writing javascript for every form in your app. To solve this problem and normalize the behavior across behavior, we’ve added defaultCommand component to PrimeFaces to define the command(e.g. button or link) to submit the form with on enter key press.

Example below sets btn3 as the target button when enter is pressed. By default browsers seem to execute btn1.

<h:form id="form">

    <h:panelGrid columns="3" cellpadding="5">
        <h:outputLabel for="name" value="Name:" style="font-weight:bold"/>
        <p:inputText id="name" value="#{defaultCommandBean.text}" />
        <h:outputText value="#{defaultCommandBean.text}" id="display" />
    </h:panelGrid>

    <p:commandButton value="Button1" id="btn1" actionListener="#{defaultCommandBean.btn1Submit}" ajax="false"/>
    <p:commandButton value="Button2" id="btn2" actionListener="#{defaultCommandBean.btn2Submit}" />
    <h:commandButton value="Button3" id="btn3" actionListener="#{defaultCommandBean.btn3Submit}" />

    <p:defaultCommand target="btn3" />

</h:form>

Future enhancements would be defining multiple defaultCommand with different scopes in same form.

Check out PrimeFaces Labs for a live example that shows how to make the browser behavior configurable.

Tip: Try Labs showcase with a clean browser cache.

This entry was posted in PrimeFaces. Bookmark the permalink.

5 thoughts on “New Component: DefaultCommand

  1. Excellent addition to an already excellent component library.
    The importance of this component cannot be underestimated: this goes a very long way to being able to produce consistent behaviour into user interfaces and make it easier to do so.

  2. Good component. Like you said Optimus Prime, this issue is very common.

    Primefaces is leading the way.

  3. Totally agree. I was just about to implement a hack to fix just this issue! How prescient!

  4. Really nice component and behavior that I was looking for a long time… I had a couple of pages that need to fire form submition with the enter key event.

    Primefaces always letting me happy with new stuffs

    Best

  5. This is a great move! Was about to work on that from our end… It would have been an ugly fix… But now, there is a clean solution that works across the board… Nice one mate!